javascript - jquery appendTo 和 detach 以重播动画 gif

Question

这是我的js：

$(document).ready(function () {
    $lrgBanner = $('#panel');
    $lrgBanner.detach();

    $('#banner img').click(function () {
        $lrgBanner.appendTo('#ad').show();
        $('#banner').hide();
        console.log('banner was clicked');
    });

});

$('#close img').click(function () {
    $('#banner').show();
    $lrgBanner.detach();
    console.log('close was clicked');
});

和 HTML：

 <div id='ad'>

    <div id='banner'>
        <img src="img/hp-small.gif" alt="banner advertisement" />
    </div>

    <div id='panel'>
        <div id='background'>
            <img src="img/hp-large.gif" alt="" />
        </div>
        <div id='close'>
            <img src="img/btn_close.gif" alt="close" />
        </div>
    </div>

</div>

div #background 包含一个动画 gif。有人告诉我，使用 detach 和 appendTo 会重新启动 gif 内容，但它似乎不起作用。

我想知道尝试使用加载功能（或 #close img 点击功能上的卸载。

有人有建议吗？

提前致谢。

Answer 1

您应该重置动画 gif 的 src 属性：

看演示

请注意，如果您不需要从全局范围访问变量，则不应将变量设置为全局变量。

$(document).ready(function () {
     gifAnimated = $('#background img')[0],
     gifSrc = "http://mlkshk.com/r/R245.gif";
     $lrgBanner = $('#panel');
     $lrgBanner.detach();

     $('#banner img').click(function () {
         gifAnimated.src = gifSrc;
         $lrgBanner.appendTo('#ad').show();
         $('#banner').hide();
         console.log('banner was clicked');
     });

 });

 $('#close img').click(function () {
     $('#banner').show();
     $lrgBanner.detach();
     gifAnimated.src = "";
     console.log('close was clicked');
 });