jQuery的移動和加速到未知的距離（平滑滾動）

想象一下這樣的代碼（簡化）jQuery的移動和加速到未知的距離（平滑滾動）

<img id="leftArrow"/> 
<div style="overflow:hidden; width:300px"> 
    <img id="wideImage" style="width:1000px; position:absolute; left:0"/> 
</div> 
<img id="rightArrow"/>

，這將導致這樣的事情
alt text http://home.exetel.com.au/aximili/tmp/stackoverflow-sample-scroll.jpg

你怎麼一個方向使#wideImage在#rightArrow懸停時向左滾動？

我事先像這樣

$('#right').hover(function() { 
    //On hover, accelerate #wideImage to the left 
}, function() { 
    //On mouse out, decelerate to stop 
});

謝謝了！

來源

2010-07-03 Aximili

這種做它

$('#right').hover(function() { 
    $('#wideImage').animate({ left: '-=50' }, 250, 'easeInQuad', function() { 
    $('#wideImage').animate({ left: '-=600' }, 250, 'linear', function() { 
     $('#wideImage').animate({ left: '-=50' }, 250, 'easeOutQuad'); 
    }); 
    }); 
}, function() { 
    $('#wideImage').stop(); 
    $('#wideImage').animate({ left: '-=50' }, 250, 'easeOutQuad'); 
});

來源

2010-07-03 12:27:46 Aximili

也許你應該給看看@this

來源

2010-07-03 09:26:00

謝謝，我不是在尋找循環，但它的有趣，給了我一個想法，+1 – Aximili 2010-07-03 12:28:37

這裏是nice tutorial基本上做你正在嘗試做同樣的事情（自動太）

編輯：哦，你的屏幕截圖樣的把我扔了，我以爲你想滾動多個圖像，但現在我看到你想跨越一個非常廣泛的圖像？

我製作了a demo來回答另一個問題，但我更新了它，以便您可以將鼠標懸停在按鈕上以動畫化圖像。我希望這更像你想要的。

來源

2010-07-03 10:19:41 Mottie

這是不同的，我需要它來移動懸停和停止鼠標移開時，但無論如何謝謝 – Aximili 2010-07-03 12:29:19

Opps，對不起，我已經更新了我的答案，更像是我想要的東西。 – Mottie 2010-07-03 17:46:25

jQuery的移動和加速到未知的距離（平滑滾動）

回答

相關問題