jquery appendTo 和 detach 以重播动画 gif

Posted 2023-02-16

【中文标题】jquery appendTo 和 detach 以重播动画 gif

【英文标题】：jquery appendTo and detach in order to replay animated gif

【发布时间】：2013-05-24 16:00:50

【问题描述】：

这是我的 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"  />
    </div>

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

</div>

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

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

有人有什么建议吗？

提前致谢。

【问题讨论】：

你能提供一个jsfiddle吗？

抱歉，我制作了那个小提琴的 v5：jsfiddle.net/Gm7jt/5

我已经更新了答案，在 chrome 上的 jsfiddle 中工作。未测试其他浏览器

【参考方案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');
 );

【讨论】：

是的，虽然它在控制台中抛出错误，但它正在工作（我在你发布时正在调整它）。但我想我可以解决这个问题。非常感谢。

如果你说的是这个错误：“Uncaught TypeError: Cannot read property 'parent' of null” 它是相对于 jsfiddle，而不是代码

呵呵，有趣的是 jsfiddle 没有抛出错误，但我的本地版本的代码是。谢谢，它正在工作，但这是主要的。