jquery - 使用 jquery 滑动对象

Question

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

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

问题是滚动不流畅，并且似乎在部分暂停。谁能告诉我如何在用户向下滚动后平滑地水平滑动图像，例如垂直滑动 200 像素。

帮助表示赞赏:)

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/