javascript - 滚动 500px 后的 Jquery addclass

Question

我想在使用 jquery 将页面向下滚动 500 像素后向 div 添加一个类。我找到了一种方法，但它是一个即时转换，我希望能够控制添加类所需的时间，就像使用普通的 Jquery addclass 一样。

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 500) {
        $(".nav").addClass("navnewclass");
    }
});

我试过这样做:

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 500) {
        $(".nav").addClass("navnewclass", 2000);
    }
});

但它是一样的。

Answer 1

I want to be able to controll how long it takes to add the class like with the normal Jquery addclass.

addClass 是总是瞬时的，它不是动画套件的一部分。

有些插件可以为您制作基于类的动画(最著名的是 jQuery UI's addClass override )，但 jQuery 本身不会。只需将 jQuery UI 添加到您的页面即可使您的第二个示例正常工作。但也有其他选择。

您的选择是使用这些插件之一，或直接为属性设置动画(使用 animate )而不是使用类。请注意，jQuery 仅对某些类型的属性进行动画处理(尤其不是颜色——jQuery UI 也添加了对动画颜色的支持)。

这是一个使用 jQuery UI 为类(带有颜色)设置动画的示例:Live Copy | Live Source

<style>
.testing {
  color: white;
  background-color: blue;
}
</style>

<!-- ...and later in the body... -->

<p>After half a second, the div below will spend two seconds animating the addition of a class.</p>
<div class="nav">This is a test .nav element</div>
<script>
setTimeout(function() {
    $(".nav").addClass("testing", 2000);
}, 500);
</script>