如何使用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中为此图像制作动画？

回答

相关问题