jQueryやCSSを使用してこの画像をアニメーションできますか？

<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領域の外側で右にアニメーションを適用する方法。 leftプロパティをアニメーション化するためにjQueryやCSSを使用してこの画像をアニメーションできますか？

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

出典

2011-12-27 Travis J

、あなたのイメージにposition: absoluteを追加したいと思うでしょう。それはおそらく、それが右に動いていない理由です。

出典

2011-12-27 20:41:51

閉じ括弧を忘れないでください。 :) –

@TravisJ - 私は私の答えに更新を加えました。あなたの質問を十分に読んでおらず、既にサイズ変更されていたが、動いていないことを確認できないことを申し訳なく思う。 –

@TravisJ、私はあなたがポジションスタイルを設定しなければならないと信じています。「相対」を試してください。 –

ほとんどの場合、img要素のCSSプロパティをpositionに設定していない可能性があります。既定では、要素のpositionプロパティはstaticに設定され、要素を無視するようにします。top/left/right/bottomプロパティ宣言。要素のpositionをstatic以外に設定する必要があります。

あなたはそれの外にアニメーション化する画像は、親コンテナのたいので、私はposition : absoluteを使用することをお勧め：あなたが変更する必要があるすべて、あなたは罰金作品を提供するjQueryのコードです

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

。ここで

はデモです：http://jsfiddle.net/PYsjz/（アニメーションを見るには画像をクリック）

出典

2011-12-27 20:53:48 Jasper

ジャスパーさん、ありがとう、これは問題でしたが、Adamは数回繰り返して私と一緒に作業していましたが、同じ結論に至りました。 –

代わりにあなたが同じ結果とmargin-leftを変更することはできますが、しかし、画像がアニメーションする必要がありますposition属性を変更する必要はありませんleft属性をアニメーション化正しく。

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

出典

2011-12-27 20:56:03 abuduba

しかし、マージンを変更するとページレイアウト全体が影響を受けます。 –

jQueryやCSSを使用してこの画像をアニメーションできますか？

答えて

関連する問題