0

<div class="poof"></div>したがって、これらのポラロイドのような画像をクリックすると、jQuery の を使用してそれらを置き換えます.replaceWith()。私がこれを行う理由は、js を使用してそのクラスにスタイルを設定したアニメーション GIF アニメーションを表示するためです。

ただし、ポラロイド画像をクリックすると、 div は毎回その html を置き換えますが、その背景は表示されません。.polaroid.poof

ここで自分で試してみてください：

画像をクリックすると、.poofdiv に置き換えられますが、アニメーションが表示されません。

これがなぜなのか、毎回アニメーションを表示する方法を誰かが理解するのを手伝ってくれて、とても感謝しています。

これが私のJavaScriptです：

   $(function(){
        var time=1;
        $('.polaroid').click(function(){
            $(this).replaceWith('<div class="poof"></div>');
            $('.poof').css('height', $(this).height()).css('width', $(this).width()).css('background', 'transparent url(poof.gif?t='+time+') center no-repeat');
            time++;
        });
});

.poofの CSS は次のとおりです。

.poof{
    height:32px;
    width:32px;
 }
4

1 に答える 1

1

DOM で削除/置換されたオブジェクトの高さと幅を取得しています

これに変更します。

var heights = 32;
var widths = 32;
$('.polaroid').click(function(){
    heights = $(this).height();
    widths = $(this).width();
    $('.poof').css('height', heights).css('width', widths).css('background', 'transparent url(http://i.imgur.com/FsVe2LC.gif?t='+time+') center no-repeat');
    time++;
    setTimeout(function(){
        $('.poof').remove();
    }, 1500);
});
于 2013-10-16T03:18:22.417 に答える