Jquery航路点偏移量

我试图弄清楚，当使用jQuery航路点遇到偏移时，如何使div滑出并滑回，我还使用了dan eden CSS动画。这是我编写的代码，但问题是当我向上滚动时，即使我将偏移设置为100%，div也不会向后滑动

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");   
}})

---

如果要在两个方向上应用两种不同的更改，则需要4个航路点；通过这种方式，您可以“定义”应进行修改的区域。我创建了一个小提琴作为示例，在本例中，div在窗口高度的25%到75%之间变为蓝色：

---

谢谢你的回复，也谢谢你整洁的小提琴。正在考虑另一种缩短此代码的方法您可以使用一个函数作为偏移量的参数，在该函数中您可以检查两个边界；通过这种方式，您可以只使用两个航路点返回，而不是像这样的

$（“div”）。航路点（function（）{…}，{offset:function（）{…}）

我认为您当前的答案有问题。请看更新后的POST，我犯了一个错误，实际上你可以使用一个函数作为

offset

值，但是这个函数只计算一次，在滚动过程中不会计算，我认为你仍然需要4个航路点才能获得结果

$("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%'});