jQuery 动画不在滚动上工作
jQuery Animate Not Working on Scroll
能否请您看一下 This Demo 并告诉我为什么定位滚动位置的第二部分不起作用?我想要做的是将滚动位置定位在 450 到 600 之间并应用此动画
$(".box-caption").animate({ "top": "600px" },1000);
到元素
$(function() {
$( window ).scroll(function(e) {
var y = $( window ).scrollTop();
if (y >200 && y< 400){
$(".box-caption").animate({ "top": "350px" },1000);
}
if (y >450 && y< 600){
$(".box-caption").animate({ "top": "600px" },1000);
}
});
});
如您所见,它正在处理第一个动画,但没有处理第二个!你能告诉我为什么会这样吗?我该如何解决?
我认为在上一个动画尚未完成时动画被触发了太多次。可怜的小家伙都糊涂了!
试一试 (Demo):
$(function() {
var is_top = false;
$( window ).scroll(function(e) {
var y = $( window ).scrollTop();
if (y >200 && y< 400 && !is_top){
is_top = true;
$(".box-caption").animate({ "top": "350px" },1000);
}
if (y >450 && y< 600 && is_top){
is_top = false;
$(".box-caption").animate({ "top": "600px" },1000);
}
});
});
问题说明:
每次您滚动到第一个范围时,它都会将动画添加到队列中。因为正在调用滚动事件 "a whole bunch per second" 你最终会看到这些 "first" 动画中的一秒又一秒。然后,当您向下滚动到第二个范围时,第二个动画会发生同样的事情,但现在您必须等待所有第一个动画完成!在它可以再次执行第一个动画之前,与第二个动画相同。你可以坐在那里不滚动,只是看着它在短暂滚动后每隔二十秒左右跳动一次。
解法:
使用一个布尔值,我们确保每个动画只能 运行 交替排列一次。一旦第一个 运行s,它就不能再次 运行,直到第二个 运行s。然后当第二个 运行s 时,它不能再次 运行 直到第一个 运行s 。来回它们只在每个滚动范围内被触发一次。
能否请您看一下 This Demo 并告诉我为什么定位滚动位置的第二部分不起作用?我想要做的是将滚动位置定位在 450 到 600 之间并应用此动画
$(".box-caption").animate({ "top": "600px" },1000);
到元素
$(function() {
$( window ).scroll(function(e) {
var y = $( window ).scrollTop();
if (y >200 && y< 400){
$(".box-caption").animate({ "top": "350px" },1000);
}
if (y >450 && y< 600){
$(".box-caption").animate({ "top": "600px" },1000);
}
});
});
如您所见,它正在处理第一个动画,但没有处理第二个!你能告诉我为什么会这样吗?我该如何解决?
我认为在上一个动画尚未完成时动画被触发了太多次。可怜的小家伙都糊涂了! 试一试 (Demo):
$(function() {
var is_top = false;
$( window ).scroll(function(e) {
var y = $( window ).scrollTop();
if (y >200 && y< 400 && !is_top){
is_top = true;
$(".box-caption").animate({ "top": "350px" },1000);
}
if (y >450 && y< 600 && is_top){
is_top = false;
$(".box-caption").animate({ "top": "600px" },1000);
}
});
});
问题说明:
每次您滚动到第一个范围时,它都会将动画添加到队列中。因为正在调用滚动事件 "a whole bunch per second" 你最终会看到这些 "first" 动画中的一秒又一秒。然后,当您向下滚动到第二个范围时,第二个动画会发生同样的事情,但现在您必须等待所有第一个动画完成!在它可以再次执行第一个动画之前,与第二个动画相同。你可以坐在那里不滚动,只是看着它在短暂滚动后每隔二十秒左右跳动一次。
解法:
使用一个布尔值,我们确保每个动画只能 运行 交替排列一次。一旦第一个 运行s,它就不能再次 运行,直到第二个 运行s。然后当第二个 运行s 时,它不能再次 运行 直到第一个 运行s 。来回它们只在每个滚动范围内被触发一次。