Jquery Waypoints offset

Question

I'm trying to figure out how i can make the div to slide out and slide in back when the offset is met using jQuery waypoint, I'm also using dan eden CSS animation. This is the code i have made but the problem is when i scroll back up the div won't slide In back even though i set the offset to 100%

JAVASCRIPT

$(".slide_copy1").waypoint(function(){
    $(this).addClass(" slideInLeft").removeClass("slideOutRight");      
},{offset:'100%'})

$(".slide_copy1").waypoint(function(){
    $(this).addClass("slideOutRight").removeClass("slideInLeft");       
},{offset:'0%'})

UPDATED POST -

$(".slide_copy1").waypoint(function(){
    $(this).addClass(" slideInLeft").removeClass("slideOutRight");
},{offset: '100%' function(){
    $(this).addClass("slideOutRight").removeClass("slideInLeft");   
}})

Answer 1

If you want to apply two different changes in both directions you need 4 waypoints; in this way you can 'define' the zone were the modification should take place. I've created a small Fiddle as an example, in this case the div become blue between 25% and 75% of the window height: http://jsfiddle.net/sandro_paganotti/mLAr2/

$("div").waypoint(function(){
    $(this).addClass("blue").removeClass("red");      
},{offset:'25%'});

$("div").waypoint(function(){
    $(this).addClass("red").removeClass("blue");      
},{offset:'24%'});

$("div").waypoint(function(){
    $(this).addClass("blue").removeClass("red");       
},{offset:'74%'});

$("div").waypoint(function(){
    $(this).addClass("red").removeClass("blue");      
},{offset:'75%'});