jQuery - как сделать две отдельные анимации

Question

Мне нужна помощь с некоторой анимацией. Я пытаюсь сделать div1, div2 и div3 вправо, а div4, div5 и div6 - влево. На данный момент я не могу отличить двух, и все, кажется, скользят в одном направлении. Я новичок в jQuery и просто изучаю, любая помощь будет оценена! Вот мой код:

<script> 

var animateMe = function(targetElement, speed){ 
$(targetElement).css({left:'-200px'}); 
$(targetElement).animate(
    { 
    'left': $(document).width() 
    }, 
    { 
    duration: speed, 
    complete: function(){ 
     animateMe(this, speed); 
     } 
    } 
); 
}; 

$(document).ready(function(){ 
animateMe($("#div1"), 15000); 
animateMe($("#div2"), 13000); 
animateMe($("#div3"), 14000); 
}); 

var animateMe = function(targetElement, speed){ 

$(targetElement).css({right:'-200px'}); 
$(targetElement).animate(
    { 
    'right': $(document).width() 
    }, 
    { 
    duration: speed, 
    complete: function(){ 
     animateMe(this, speed); 
     } 
    } 
); 
}; 

$(document).ready(function(){ 
animateMe($("#div4"), 16000); 
animateMe($("#div5"), 14000); 
animateMe($("#div6"), 13000); 
}); 

</script> 

Answer 1

Вы, вероятно, работает в состоянии гонки, где вы установить animateMe вар к функции, а затем повторно установить его, то после того, как из них происходят, document.ready стреляет и оживляющий все элементы <div /> с использованием второй функции animateMe.

Просто потому, что код читает сверху вниз, это не значит, что это будет выполняться. Ваш код почти наверняка выполняет так:

[CREATE FUNCTION] 
[OVERWRITE FUNCTION] 
[ANIMATE 1, 2, 3] 
[ANIMATE 4, 5, 6] 

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