javascript 滚动 500px 后的 Jquery addclass
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18288771/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery addclass after scrolling 500px
提问by Dave
I want to add a class to a div after scrolling 500px down the page using jquery. I found a way of doing it but it's an immediate transition, I want to be able to controll how long it takes to add the class like with the normal Jquery addclass.
我想在使用 jquery 向下滚动页面 500px 后向 div 添加一个类。我找到了一种方法，但它是一种立即转换，我希望能够像使用普通的 Jquery addclass 一样控制添加类所需的时间。
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".nav").addClass("navnewclass");
}
});
I tried doing this:
我试过这样做：
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".nav").addClass("navnewclass", 2000);
}
});
but it was the same.
但它是一样的。
采纳答案by T.J. Crowder
I want to be able to controll how long it takes to add the class like with the normal Jquery addclass.
我希望能够像使用普通的 Jquery addclass 一样控制添加类需要多长时间。
addClassis alwaysinstantaneous, it's not part of the animation suite.
addClass是总是瞬间，它不是动画套件的一部分。
There are plug-ins that will do class-based animations for you (most notably jQuery UI's addClassoverride), but jQuery itself does not. Simply adding jQuery UI to your page will make your second example work. But there are other options as well.
有一些插件可以为您执行基于类的动画（最显着的是jQuery UI 的addClassoverride），但 jQuery 本身不会。简单地将 jQuery UI 添加到您的页面将使您的第二个示例工作。但也有其他选择。
Your options are to use one of those plug-ins, or animate the properties directly (using animate) rather than using a class. Note that jQuery only animates certain kinds of properties (not, notably, colors — jQuery UI adds support for animating colors as well).
您的选择是使用这些插件之一，或者直接（使用animate）而不是使用类为属性设置动画。请注意，jQuery 仅对某些类型的属性进行动画处理（尤其是颜色——jQuery UI 还添加了对动画颜色的支持）。
Here's an example animating a class (with colors) using jQuery UI: Live Copy| Live Source
下面是使用 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>
回答by Nikhil sHETH
IT WILL WORK FINE FOR ME.
对我来说效果很好。
$(document).scroll(function() {
var scroll = $(this).scrollTop();
if (scroll >= 500) {
setTimeout('$(".nav").addClass("navnewclass")',1000);
}
});
instead of 1000 U can just set your time.
而不是 1000 U 可以设置你的时间。
回答by Rizo
you can do that using jQuery or $ sign
你可以使用 jQuery 或 $ 符号来做到这一点
example:
例子：
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
$("#logo-not-scroll").addClass("blue1");
}
else{
$("#logo-not-scroll").removeClass("blue1");
}
});
or
或者
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");
}
});
