javascript - 使用 jquery.animate() 和 jquery.scroll() 反转由动画效果引起的 CSS 变化

Question

有没有办法根据滚动的位置反转由 jQuery.animate() 引起的 CSS 变化？我在一个网站上工作，当用户向下滚动时，我希望在某个元素上出现某种动画效果。之后，当用户向上滚动时，元素必须返回到之前的状态。一个例子:

$(window).scroll(function(){
    if(this.scrollTop() >= 300){  //Scrolling down to a point 300 or more
        $('.foo').animate({
            'width': 100 
           'height': 100 
        }, 500, 'swing');     
     }
});

正如您从上面的代码片段中看到的，当用户向下滚动时会发生这种效果。现在下面是一段代码，我可以从逻辑上想到反向效果如何工作:

if(this.scrollTop() <= 300) {  //Scrolling down to a point 300 or more    
    $('.foo').animate({
        'width': 10 
        'height': 10
    }, 500, 'swing');     
 }

点击THE FIDDLE查看运行中的代码并获得更好的洞察力。

但是，我已经看到很多插件这样做，是否有更好的方法来完成上述场景，仅使用 jQuery.animate() 绑定(bind) jQuery.scroll() ？如果是这样，你能给我举个例子吗？或者你能告诉我一个链接吗？请指导我/建议我。

感谢您的帮助!

Answer 1

你可以为此使用一个类，根据你的情况创建一个具有你想要的属性的类

.scrolled {
  height: 100px;
  width: 100px;
}

然后addClass，它接受你想要的其他选项，所以你可以

if(this.scrollTop() >= 300){
    this.addClass('scrolled', 500, 'swing');
}

if(this.scrollTop() < 300){
    this.removeClass('scrolled', 500, 'swing);
}