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一样控制添加类所需的时间。

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

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

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

滚动500px后的Jquery addclass

3 个答案: