如何使用jQuery和/或css在td中爲此圖像製作動畫？

<td id="display5" class="displayableCell" style="border: 0px none; width: 120px;"> 
<span id="name5">Photo Name</span> 
<br> 
<img id="img5" height="auto" width="120px" src="/Home/GetPhoto/53"> 
</td>

我已經嘗試了許多東西都沒有用。這是我最近的一次嘗試，它最大限度地減少了圖像，但並沒有將它移到右側，這是整個目標。 如何在td區域之外向右移動它。如何使用jQuery和/或css在td中爲此圖像製作動畫？

var target = "#img" + Displayable.count; 
$(target).animate({ "left": "+=240px", "width": "-=120px" }, "fast");

來源

2011-12-27 Travis J

爲了動畫left財產，你會希望添加到position: absolute圖像。這可能是爲什麼它沒有向右移動。

來源

2011-12-27 20:41:51

不要忘了右括號。 :) – 2011-12-27 20:43:05

@TravisJ - 我添加了一個更新到我的答案。我很抱歉沒有完全閱讀你的問題，看到它已經在調整大小，但沒有移動。 – 2011-12-27 20:49:48

@TravisJ，我相信你必須設置位置風格。嘗試'親戚'。 – 2011-12-27 20:50:12

最有可能你不設置爲img元素position CSS屬性。默認情況下，position屬性的元素被設置爲static這使得元件忽略top/left/right/bottom屬性聲明。您需要將元素的position設置爲static以外的值。

既然你想要的形象動畫出來的它的父容器，我建議使用position : absolute：

.displayableCell > img{ 
    position : absolute; 
    top  : 20px; 
    left  : 0; 
}

這就是你需要改變，jQuery代碼你提供優良工程。

這裏是一個演示：http://jsfiddle.net/PYsjz/（點擊圖片看動畫）

來源

2011-12-27 20:53:48 Jasper

謝謝賈斯帕，這是問題，但亞當一直在與我一起研究幾次迭代，我們得出了相同的結論，所以我將他標記爲答案。 – 2011-12-27 20:55:35

相反動畫left屬性可以修改具有相同結果的margin-left，但你沒有改變position屬性但是圖像應是動畫正常。

$(target).animate({ "margin-left": "+=240px", "width": "-=120px" }, "fast");

來源

2011-12-27 20:56:03 abuduba

這將起作用，但是，更改頁邊距會影響整個頁面佈局。 – 2011-12-27 21:00:17

如何使用jQuery和/或css在td中爲此圖像製作動畫？

回答

相關問題