Странная анимационная очередь - PullRequest
Новая
       17

Странная анимационная очередь

1 голос
/ 17 июня 2011

Я играл с цепочечной анимацией, и это меня сильно озадачило

У меня есть только один анимируемый элемент, но эффект "встряхивания" оставлен в нижней части очереди.

.animate().animate().effect('shake',{times:3},10).animate()....

упрощенная онлайн-версия: http://jsfiddle.net/ottoln/F9xfD/3/

не совсем понимаю, почему ... кто-нибудь?

скрипка, которую он, вероятно, хотел связать: http://jsfiddle.net/ottoln/F9xfD/

Ответы [ 2 ]

0 голосов
/ 17 июня 2011

Метод effect не ставится в очередь точно так же, как остальные вызовы animate, но принимает в качестве параметра обратный вызов, который будет запущен после завершения эффекта.Вы можете сделать это вместо: 

$('#bunda').animate({
    marginTop: '+=200',
    marginLeft: '+=150'
}, 1300).animate({
    marginTop: '-=50',
    marginLeft: '+=100',
    'background-color': 'darkred'
}, 1000).effect('shake', {
    times: 3,
}, 50, function () {
    $('#bunda').animate({
        marginTop: '+=300'
    }, 500);
});

Пример: http://jsfiddle.net/CCw9U/

0 голосов
/ 17 июня 2011

Добавьте обещание () и готово () , чтобы убедиться, что fx полностью разрешено, прежде чем продолжить анимацию: 

$('#bunda').animate({
    marginTop: '+=200',
    marginLeft: '+=150'
}, 1300).animate({
    marginTop: '-50',
    marginLeft: '+=100',
    'background-color': 'darkred'
}, 1000).effect('shake', {
    times: 3
}, 50).promise().done(function(){
 $(this).animate({
    marginTop: '+=300'
}, 500);   
});

пример: http://jsfiddle.net/niklasvh/MtkaY/

...