анимация прозрачности, вставка HTML, анимация анимации в - PullRequest
Новая
       16

анимация прозрачности, вставка HTML, анимация анимации в

2 голосов
/ 04 декабря 2008

С помощью jquery я пытаюсь сделать переход от сообщения к функции загрузки простым для глаз, анимируя прозрачность сообщения, вставляя loading.gif и анимируя прозрачность обратно. Сбой. 

$('#powerSearchSubmitButton').click(function(ev) {
    startLoad();
    return false;
});
function startLoad() {
    $('.message').each(function(i) {
        $(this).animate({opacity: 0}, 500, function() {
            $(this).html("<img src=\"/content/pics/loadingBig.gif\" alt=\"loading\" style=\"opacity:0\"/>");
            $(this).animate({opacity: 1},500);
        });
    };
    return true;
};

Когда я пропускаю вызов .html (), он работает нормально (за исключением, конечно, изображения там нет; поэтому я думаю, что это потому, что HTML не вставлен с непрозрачностью: 0; с style = "opacity: 0" он не может исчезнуть в ...

Что я делаю не так?

Ответы [ 3 ]

2 голосов
/ 04 декабря 2008

Попробуйте это: 

$(this).fadeOut(500, function() {
     $(this).html("<img src='content/pics/loadingBig.gif' alt='loading'/>");
    });
$(this).fadeIn(500);
0 голосов
/ 04 декабря 2008

Не указывайте изображение style = "opacity: 0;" - он не будет виден, пока его родитель скрыт, и, как вы выяснили, он останется с непрозрачностью 0, как только родитель снова исчезнет.

Вы также можете использовать функции jQuery fadeIn и FadeOut вместо ручной анимации.

0 голосов
/ 04 декабря 2008

Вместо этого примените анимацию к контейнеру или используйте метод .css () для установки прозрачности (встроенные стили могут мешать способности jQuery анимировать соответствующие свойства).

...