如何添加滑動內部的圖像的

嗨行，我有一個jQuery的問題，我需要的是，滑動圖像的邊界線內掙扎。有四行，我希望它們在頁面加載時在邊框內滑動。第一行應該滑下來;第二個從左到右;第三個從上到下，第四個從右到左。如何添加滑動內部的圖像的

我希望我的問題是清楚的。

enter image description here

（所提到的線是紅色）

來源

2014-04-28 allence

是的 - 這很明顯。你能發佈你已經試過的代碼並解釋發生了什麼嗎？ – Archer

看看jQuery的[.ainmate（）]（https://api.jquery.com/animate/）方法 – SlashmanX

實際上我沒有一個準確的代碼。我可以通過z-index創建行屬性。但不知道如何滑動它們。 – allence

我會告訴前兩個，你可以做其他兩個

function slideLine1(){ $('#line1').animate({width: '100%'}, 1000, slideLine2); } 
function slideLine2(){ $('#line2').animate({width: '100%'}, 1000, slideLine3); }

這將工作。但是，您可以使用1個函數執行此操作，調用它自己和一個i變量。這將取決於你。

還有其他的方法來做，這是一個非常簡單的例子。提示：調查jQuery鏈接。

來源

2014-04-28 16:58:22 Martijn

你不需要JS來做到這一點。通過使用keyframes執行此動畫onload的Here is a pure CSS way。除非你想支持舊瀏覽器，否則這種方法應該可以工作。

來源

2014-04-28 17:01:45

+1。有點難度，但動畫會更流暢（動畫更大）。 – Martijn

人們說這一點，但我注意到，與正常的jQuery Animate相比，動畫是波濤洶涌，速度較慢。 – WASasquatch

我發現移動設備的菜單動畫更快，更平滑。可能是設備/動畫感覺敏感 – Martijn

Here is a demo它只使用css。

它基本上使用@keyframes來解決問題。

來源

2014-04-28 17:18:36 JimmyRare

這是非常好的。但也許我不能正確地指出問題。線條在圖像內部移動。但我希望他們從內向外移動。 http://jsfiddle.net/QL3wT/2/ – allence

[喜歡這個？]（http://jsfiddle.net/f8jDp/1/） – JimmyRare

如何添加滑動內部的圖像的

回答

相關問題