Смещение путевых точек Jquery

Question

Я пытаюсь выяснить, как я могу заставить div выдвигаться и скользить назад, когда смещение встречается с помощью путевой точки jQuery, я также использую анимацию dan eden CSS. Это код, который я сделал, но проблема в том, что когда я прокручиваю назад вверх, div не сдвигается назад, даже если я установил смещение на 100%

JAVASCRIPT

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

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

ОБНОВЛЕННЫЙ ПОСТ -

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

Answer 1

Если вы хотите применить два разных изменения в обоих направлениях, вам нужно 4 путевые точки; таким образом, вы можете "определить" зону, в которой должно произойти изменение. Я создал маленькую скрипку в качестве примера, в этом случае div становится синим между 25% и 75% высоты окна: 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%'});