滚动500px后的Jquery addclass

Question

我想在使用jquery向下滚动500px的页面后，向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

我希望能够控制添加这个类需要多长时间，就像使用普通的Jquery

一样。

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>

Answer 2

对我来说没问题。

$(document).scroll(function() {    
var scroll = $(this).scrollTop();
if (scroll >= 500) {
setTimeout('$(".nav").addClass("navnewclass")',1000);
}
});

你可以设定你的时间，而不是1000U。

Answer 3

您可以使用jQuery或$ sign来完成此操作

示例：

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 100) {
        $("#logo-not-scroll").addClass("blue1");
    }
    else{
        $("#logo-not-scroll").removeClass("blue1");
    }
});

或

jQuery(window).scroll(function() {    
        var scroll = jQuery(window).scrollTop();
        if (scroll >= 100) {
            jQuery("#logo-not-scroll").addClass("blue1");
        }
        else{
            jQuery("#logo-not-scroll").removeClass("blue1");
        }
});