2

我想在使用 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);
    }
});

但它是一样的。

4

3 回答 3

2

我希望能够像使用普通的 Jquery addclass 一样控制添加类需要多长时间。

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

有一些插件会为你做基于类的动画（最值得注意的是jQuery UI 的addClassoverride），但 jQuery 本身不会。只需将 jQuery UI 添加到您的页面即可使您的第二个示例正常工作。但也有其他选择。

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

这是一个使用 jQuery UI 为类（带有颜色）设置动画的示例：Live Copy | 直播源

<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>
于 2013-08-17T12:27:05.383 回答
0

这对我来说会很好。

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

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

于 2013-08-17T13:40:50.727 回答
0

你可以使用 jQuery 或 $ 符号来做到这一点

例子：

$(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");
        }
});
于 2018-04-10T18:18:20.863 回答