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 var设置为一个函数，然后重新设置它，然后在这两个发生之后，document.ready正在触发并动画所有使用第二个<div />函数的animateMe个元素。

仅仅因为代码自上而下读取，这并不意味着它将如何执行。你的代码几乎肯定会像这样执行：

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

我建议您允许将参数传递给animateMe函数以使属性设置为动画，这样您就可以使用一个函数为所有元素设置动画。

jQuery - 如何制作两个单独的动画

1 个答案: