jQuery：在动画容器上重置 Gif（css-background）（仅限 Firefox）

【问题标题】：jQuery: Gif (css-background) gets reset on animating container (Firefox only)jQuery：在动画容器上重置 Gif（css-background）（仅限 Firefox）
【发布时间】：2011-12-29 09:48:37
【问题描述】：

似乎我得到了重新开始的 GIF 动画的奇怪行为，而且这只在 Firefox 中。

场景：

点击后，div 的宽度会被调整。这个 div 作为 CSS 中的背景属性设置了颜色和 GIF。在动画的开始和结束时，GIF 会被重置，但仅限于 Firefox 8.0

演示

我在http://jsfiddle.net/ms8yd/ 下创建了一个 jsFiddle（带有由 Google 图片找到的测试图像）。

在 IE 9、最新的 Chrome、Windows 7 下的 Firefox 8.0 中对此进行了测试。

问题

有人知道为什么会发生这种情况以及防止这种情况的解决方法吗？或者，如果没有解决方法，而这只是 FireFox 的行为，谁能给我一个解决方法？

谢谢，紫苑

【问题讨论】：

标签： jquery firefox animated-gif

【解决方案1】：

如果调整 DIV 的大小，它将被重置。

现场演示：http://jsfiddle.net/ms8yd/1/

脚本：

$('p').click(function() {
    var $div = $('div');
    var width = $div.width() == 350 ? 100 : 350;
    $('#loader').animate({
        'width': width
    }, 500);
});

HTML

<p>Click me for the Effect</p><br />
<br />
<div id="loader"><img src="http://www.askmaps.in/Content/images/loading.gif" /></div>

CSS

p
{
    cursor: pointer;
}

div#loader
{
    width: 100px;
    height: 100px;
    position: relative;
    background: #000000;
}
img
{
    width: 32px;
    height: 32px;
    position: absolute;
    left: 50%; /* CENTER THE DIV */
    top: 50%;/* CENTER THE DIV */
    margin: -16px 0 0 -16px; /* CENTER THE DIV */
}

【讨论】：