jQuery: Gif (css-background) сбрасывается при анимации контейнера (только Firefox) - PullRequest
Новая
       4

jQuery: Gif (css-background) сбрасывается при анимации контейнера (только Firefox)

0 голосов
/ 15 ноября 2011

Кажется, что странное поведение анимации GIF начинается заново, и это только в Firefox.

Сценарий:

При щелчке,размер div изменен по ширине.Этот div в качестве background-свойства в CSS установил цвет и GIF.В начале и в конце анимации GIF сбрасывается, но только в Firefox 8.0

Демонстрация

Я создал jsFiddle в http://jsfiddle.net/ms8yd/ (с тестовым изображением, найденным Google Images).

Протестировано это в IE 9, новейшем Chrome, Firefox 8.0 под Windows 7.

Вопрос

Кто-нибудь знает, почему это происходит и как это исправить?Или, если нет решения, и это только строго поведение FireFox, кто-нибудь может предоставить мне обходной путь?

Спасибо, Шион

1 Ответ

0 голосов
/ 15 ноября 2011

Будет сброшено при изменении размера DIV.

Live DEMO: 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 */
}
...