Question

用户在我的网站上滚动说200px后，我试图水平滑动固定图像。代码看起来像这样：

//CSS
div#slideimage
{
   position: fixed;
   left: -20%;
   width: 500%;
}


// JQUERY
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
   $('#slideimage').stop().animate({left: "100px"});
} else {
     $('#slideimage').stop().animate({left: "-400px"});
}
});

问题是滚动不顺畅，似乎在部分暂停。任何人都可以告诉我如何在用户向下滚动后水平滑动图像，例如，垂直向下滚动200px。

帮助表示赞赏：）

Answer 1

这是因为当用户滚动时，jQuery会将动画队列堆叠到浏览器中。这会创建一个不太流畅的动画，因为浏览器会被多个动画操作冲洗掉。你需要做的是等几毫秒来做动画

$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
 setTimeout(function() {
   $('#slideimage').stop().animate({left: "100px"});
 }, 150);
} else {
   setTimeout(function() {
     $('#slideimage').stop().animate({left: "-400px"});
 }, 150);
}
});

Answer 2

可能是Tiny carousel对你来说是最好的目的地，我已经用过了，我从中得到了很好的结果。这是

的链接

http://baijs.nl/tinycarousel/

用jquery滑动对象

2 个答案: