用jquery滑動對象

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

可能會有微小的傳送帶將是你最好的歸宿，我已經使用它，我接到了很好的效果。這裏是該鏈接

http://baijs.nl/tinycarousel/