Bug when scrolling up and down multiple times

[caseykalman]

Currently if I scroll through my site, waypoints appears to be working correctly, but if I scroll up and down too much features that are meant to fade out stay visible.

I'm sure there is a more concise way of doing this, but here is my code so far:

` var inviewOne = new Waypoint.Inview({ element: $('#one'), enter: function(direction) { if(direction === 'down'){ $("#messageOne").fadeIn(InSpeed); } else { $("#messageOne").fadeOut(2); } }, entered: function() {

          },
          exit: function(direction) {
            if(direction ==='down'){
                $("#messageOne").fadeOut(OutSpeed);
            } else {
                $("#messageOne").fadeIn(UpSpeed);
            }

          },
          exited: function(direction) {
            if (direction === 'down'){

            } else {
                $("#messageOne").fadeOut(UpSpeed);
            }
          }
        })

    var inviewTwo = new Waypoint.Inview({
          element: $('#two')[0],
          enter: function(direction) {
            if(direction === 'down'){
                $("#messageTwo").fadeIn(InSpeed);
                $("#map1").fadeIn(InSpeed)
           } else {
                $("#messageTwo").fadeOut(OutSpeed);
                $("#map1").fadeOut(OutSpeed)
           }

          }, 
          entered: function() {

          },
          exit: function(direction) {
            if (direction === 'down'){
                $("#messageTwo").fadeOut(OutSpeed);
            } else {
                $("#messageTwo").fadeIn(InSpeed);
            }

          },
          exited: function(direction) {
            if (direction === 'down'){

            } else {
                $("#messageTwo").fadeOut(OutSpeed);
                $("#map1").fadeOut(OutSpeed);
            }
          }
        })

    var inviewThree = new Waypoint.Inview({
          element: $('#three')[0],
          enter: function(direction) {
            if (direction === 'down'){
                $("#messageThree").fadeIn(InSpeed);
                $("#map1").fadeOut(OutSpeed)
                $("#map2").fadeIn(InSpeed)
            } else {
                $("#messageThree").fadeOut(OutSpeed);
                $("#map1").fadeIn(InSpeed)
                $("#map2").fadeOut(OutSpeed)
            }

          }, 
          entered: function() {

          },
          exit: function(direction) {
            if (direction === 'down'){
                $("#messageThree").fadeOut(OutSpeed);
            } else {
                $("#messageThree").fadeIn(InSpeed);
            }

          },
          exited: function(direction) {
           if (direction === 'down'){

            } else {
                $("#messageThree").fadeOut(OutSpeed);
            }
          }
        })

    var inviewFour = new Waypoint.Inview({
          element: $('#four')[0],
          enter: function(direction) {
            if(direction ==="down"){
                $("#messageFour").fadeIn(InSpeed);
                $("#map2").fadeOut(OutSpeed)
            } else {
                $("#messageFour").fadeOut(OutSpeed);
                $("#map2").fadeIn(InSpeed)
            }
          },
          entered: function() {

          },
          exit: function(direction) {
            if(direction ==="down"){
                $("#messageFour").fadeOut(OutSpeed);
                } else {
                $("#messageFour").fadeIn(InSpeed);
            } else {
                $("#map2").fadeOut(OutSpeed)
            }
          },
          exited: function(direction) {
            if (direction === 'down'){

            } else {
                $("#messageFour").fadeOut(OutSpeed);
            }
          }
        })

`