使用 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.scroll() 绑定的 jQuery.animate() ？如果是这样，你能给我举个例子吗？或者你能告诉我 link 吗？请指导me/advice我。

感谢您的帮助！

Answer 1

如果您不需要强制 jquery 编辑对象的 CSS，您可以告诉它 add/remove 类，这会给您类似的效果。

如果您的对象的样式已经组成为 10px width/height，那么您可以使用类似

的样式

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

并在您的 javascript 代码中：

if(this.scrollTop() >= 300){
    this.addClass('bar');
}

那你就可以

removeClass('bar');

在你不需要的时候。

https://api.jquery.com/addclass/

https://api.jquery.com/removeclass/

Answer 2

您可以为此使用 class，根据您的情况创建具有所需属性的 class

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

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

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

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

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

Reversing the changes on CSS caused by the animation effect using jquery.animate() and jquery.scroll()

html

javascript

css

jquery

animation