如何使用jQuery和/或css在td中为此图像设置动画？

Question

<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>

I have tried many things to no avail. This is my most recent attempt, which minimizes the image, but does not move it to the right which is the whole goal here. How to animate it to the right, outside of the td area.

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

Answer 1

取而代之的是动画left属性，您可以使用相同的结果修改margin-left ，但是您没有更改position属性，但图像应该是正确的动画。

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

Answer 2

In order to animate the left property, you'll want to add position: absolute to your image. That's likely why it wasn't moving to the right.

Answer 3

Most likely you are not setting a position CSS property for the img elements. By default the position property for an element is set to static which makes the element ignore top / left / right / bottom property declarations. You need to set the element's position to something other than static .

Since you want the image to animate out of it's parent container, I suggest using position : absolute :

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

That's all you need to change, the jQuery code you provided works fine.

Here is a demo: http://jsfiddle.net/PYsjz/ (click the image to see the animation)