0

それぞれ独自の div 内にある 4 つの異なる小さな画像のサイズをアニメーション化したいと考えています。現在、div をアニメーション化できますが、div 内の画像は変更されません。これを行う方法はありますか？

現在機能している例を次に示します: http://jsfiddle.net/r69Zv/1/

私の現在のJavaScript：

$(document).ready(function () {
    $("#green_box_container a").click(function() {
          $(this).children().animate({height:105,width:105})
          $(this).siblings().children().animate({height:80,width:80})
    })
});

編集: $(this).children('img').animate と入力しようとするだけでは機能しないようです ...

どんな助けでも素晴らしいでしょう!!

4

2 に答える 2

0

これを行う方法はたくさんありますが、1 つの方法は、この CSS スタイルを追加することです

div img { width:100%; height:100%; }

フィドル

アップデート

参考までに、HTML を簡略化しました。

このフィドルをチェックしてください...はるかにシンプルでクリーンです。

于 2013-03-21T04:29:32.393 に答える
0

ああ、2 つのオプションがあります。

  1. コンテナのサイズを継承するように画像のスタイルを設定します。

    { 位置: 相対; }

    img { 位置: 絶対; 幅: 100%; 高さ: 100%; }

  2. 画像とそのコンテナーのサイズを変更します。

    $(document).ready(function () { $("#green_box_container a").click(function() { $(this).children().animate({height:105,width:105}) $(this .find('img').animate({height:105,width:105}) $(this).siblings().children().animate({height:80,width:80}) }) }) ;

于 2013-03-21T04:31:04.670 に答える