一個div上的多個動畫

所以我有一個背景圖像和頂部的蒙版圖像。我有一組四個按鈕，當他們被點擊時，我想將頂部圖像移動到不同的位置。我一直在測試了jQuery的動畫功能，但我不能返回到圖像恢復到原來的狀態之後，我知道這可能是錯誤的方法，但是這是我迄今爲止對我的jquery：一個div上的多個動畫

<script> 

$("#right").click(function() { 
$("#content").animate(
     {"left": "+=200px"}, 
     "slow"); 
}); 
$("#left").click(function() { 
$("#content").animate(
     {"left": "-=200px"}, 
     "slow"); 
}); 

$("#farRight").click(function() { 
$("#content").animate(
     {"left": "+=400px"}, 
     "slow"); 
}); 


</script>

任何幫助將不勝感激！

來源

2013-04-11 YIPPITYSKIP

你應該寫與適當的過渡CSS類，並添加和刪除。這需要照顧動畫，並且很容易切換。 –

你會想要存儲原始位置，所以你可以返回它。我會使用jQuery的data方法來做到這一點：

$("#content").data("originalPosition", $("#content").position()); 

$("#return").click(function() { 
    $("#content").animate({ 
     "left": $("#content").data("originalPosition").left 
    }, "slow"); 
});

http://jsfiddle.net/ryanbrill/KPLTy/

來源

2013-04-11 23:53:24 ryanbrill

真棒，謝謝！ – YIPPITYSKIP

是的絕對，我並不意味着熱心，尤其是在我的JavaScript級別，但有沒有一種方法讓每個div存儲內容的原始位置，以便每次點擊left，right，farRight div動畫時關於內容的原始起始位置？ – YIPPITYSKIP

當然 - 您可以在運行動畫之前重置左側位置。看到這個更新的小提琴：http://jsfiddle.net/ryanbrill/KPLTy/1/ – ryanbrill

一個div上的多個動畫

回答

相關問題