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 click函数。

有人有任何建议吗？

提前致谢。

Answer 1

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

SEE DEMO

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

$(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');
 });

jquery appendTo和detach以重放动画gif

1 个答案: