Простая, но багги, анимация jQuery

Question

Я экспериментировал с jQuery самостоятельно и сталкивался с некоторыми ошибками, которые я просто не могу понять. Любая помощь будет принята с благодарностью.

Простую анимацию можно найти ниже (со ссылкой на jsfiddle).

Нажав на кнопку, свиньи должны войти слева, двигаться вперед (завершая несколько пируэтов по пути), а затем исчезать. Джордж Костанца входит слева и дает свои аплодисменты.

К сожалению, Джордж не имеет права хлопать, поскольку движения свиней ужасно багги; он проскакивает назад и вперед так, как я никогда не думал. Точно так же с движениями Джорджа. Кроме того, он никогда, кажется, не уходит со страницы в конце, как я и предполагал.

Кстати, у меня не было проблем с этим на компьютере, на котором я написал анимацию (используя хром в jsfiddle). Тем не менее, на моем ноутбуке (хром) и ноутбуке друга (сафари?), Он безнадежно глючит.

Любые мысли о том, где я ошибаюсь? Заранее спасибо!

Вот код и ссылку на jsfiddle: jsfiddle.net/corduroy_joy/v69st/

 

$(document).ready(function() { 
    $('#button').click(function(){ 
     $('#pig').animate({left:'+=200px'}, 1000).animate({top:'+=10px'}, 100).animate({left:'+=10px'}, 100).animate({bottom:'+=12px'}, 100).animate({left:'+=100px'}, 690, 'linear').animate({bottom:'+=15px'}, 100).animate({left:'+=130px'}, 590, 'linear').animate({top:'+=10px'}, 100).animate({left:'+=10px'}, 100).animate({bottom:'+=12px'}, 100).animate({left:'+=100px'}, 690, 'linear').animate({top:'-=15px'}, 100).animate({left:'+=130px'}, 590, 'linear').animate({top:'+=10px'}, 100).animate({left:'+=10px'}, 100).animate({bottom:'+=12px'}, 100).animate({left:'+=100px'}, 690, 'linear').animate({top:'-=12px'}, 100).animate({left:'+=100px'}, 690, 'linear').animate({bottom:'+=15px'}, 100).animate({left:'+=130px'}, 590, 'linear').animate({bottom:'+=15px'}, 100).animate({left:'+=130px'}, 590, 'linear').fadeTo('slow', 0).animate({left:'+=200px'}, 1000, function() {$('#pig').removeAttr('style');                                                                                                                                                                                                                               }); 

$('#george').animate({left:'-=1px'}, 7000).animate({left:'+=280px'}, 1500).delay(1400).animate({left:'-=281px'}, 3500); 
}); 
}); 

Update: Уф, ничего бесконечного количества вещей, которые я пробовал, кажется, работает. Я отказываюсь от анимации jQuery!

Answer 1

Вы должны использовать функцию обратного вызова метода animate, иначе до завершения анимации выполняется другая анимация.

$('#button').click(function(){ 
    $('#pig').animate({left:'+=200px'}, 1000, function(){ 
     $(this).animate(..., function(){ 
      $(this).animate(..., function() { }) 
     }) 
})