JS, jQuery: как сделать цепочку анимации jQuery, НЕ дождавшись завершения предыдущей анимации? - PullRequest
Новая
       19

JS, jQuery: как сделать цепочку анимации jQuery, НЕ дождавшись завершения предыдущей анимации?

1 голос
/ 06 марта 2011

Как вы, возможно, знаете, если вы объединяете анимации jQuery вместе, используя параметр "complete", каждая анимация происходит последовательно только после завершения предыдущей.

У меня есть такая цепочка: 

$('#foobar').load(url, function(){
    $(this).fadeIn(time, function(){
        $(this).scrollTop(position, time, function() {
            $(this).css({'color':'#58e'})
        });
    });
});

Эта цепочка будет выполнять что-то вроде этого: сначала загрузить контент, затем постепенно добавить его, затем прокрутить до самого верха, а затем, наконец, изменить цвет CSS.

То, что я хочу, это: сначала загрузить контент, затем добавить и прокрутить до верха одновременно, а затем, наконец, изменить цвет после того, как fadeIn и scrollTop оба сделаны.

Допустим, анимация scrollTop занимает в два раза больше времени, чем анимация fadeIn. Какой простой фрагмент кода я бы добавил к своему коду, чтобы обратный вызов scrollTop в fadeIn НЕ Дождался завершения анимации fadeIn. Анимация css() будет ожидать завершения анимации scrollTop, как обычно.

Таким образом, единственное изменение (каким бы оно ни было) повлияет на обратный вызов в fadeIn, где вызывается scrollTop. Я предполагаю, что это может быть связано с манипулированием очередью?

Спасибо за помощь!

РЕДАКТИРОВАТЬ: Вот решение, подсказанное Эндрю:

Во-первых, мой оригинальный код, который загружает каждую пользовательскую функцию по порядку: 

show_loader(0, function() {
    close_box($target_close, '/', '#' + $target_close.attr('id') + ' .post_wrap', function() {
        open_box($target_open, event.value, '.wide-col', function() {
            hide_loader(function() {
                scroll_to_content($target_open);
            });
            $target_close = $target_open;
        });
    });
});

Теперь я хочу, чтобы close_box и open_box выполнялись асинхронно (одновременно), поэтому я изменил это на следующее: 

show_loader(0, function() {
    close_box($target_close, '/', '#' + $target_close.attr('id') + ' .post_wrap');
    open_box($target_open, event.value, '.wide-col', function() {
        hide_loader(function() {
            scroll_to_content($target_open);
        });
        $target_close = $target_open;
    });
});

Теперь анимации close_box и open_box происходят в одно и то же время.

1 Ответ

1 голос
/ 07 марта 2011

Переместите код, который оживляет scrollTop за пределы обратного вызова, в функцию fadeIn: 

$('#foobar').load(url, function() {
    $(this).fadeIn(time);            
    $(this).scrollTop(position, time, function() {
        $(this).css({'color':'#58e'});
    });
});
...