Как я могу анимировать это изображение в тд, используя jQuery и / или CSS?

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>

Я перепробовал много вещей безрезультатно.Это моя последняя попытка, которая минимизирует изображение, но не сдвигает его вправо, что и является всей целью. Как оживить его вправо, за пределами области тд.

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

Скорее всего, вы не устанавливаете position свойство CSS для элементов img.По умолчанию свойство position для элемента установлено на static, что заставляет элемент игнорировать объявления свойств top / left / right / bottom.Вам нужно установить position элемента в значение, отличное от static.

Поскольку вы хотите, чтобы изображение анимировалось из его родительского контейнера, я предлагаю использовать position : absolute:

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

Это все, что вам нужно изменить, предоставленный вами код jQuery отлично работает.

Вот демонстрационная версия: http://jsfiddle.net/PYsjz/ (нажмите на изображение, чтобы увидеть анимацию)

Answer 3

Чтобы анимировать свойство left, вам нужно добавить position: absolute к вашему изображению. Вероятно, поэтому он не двигался вправо.