javascript - 为多个 div 制作动画

Question

我尝试过 .join() 函数，jQuery 必须同时为多个对象设置动画。

它辜负了我的期望。这是我的代码。请告诉我为什么这行不通？

$(document).ready(function() {
 animateRight();
   var fourLevelMove = ["#CsecondObj", "#CnineObj"];
   var fourLevelMoveone = fourLevelMove.join();


function animateRight() {
$(fourLevelMoveone).animate({
    'marginLeft' : "+=220px" //moves left
 }, 900, 'swing', animateLeft);
}

function animateLeft() {
$(fourLevelMoveone).animate({
    'marginLeft' : "-=220px" //moves right
  }, 900, 'swing', animateRight);
 }
});

Answer 1

你愿意尝试一下吗:

$(document).ready(function() {
    //animateRight();//fourLevelMoveone IS NOT DEFINED YET
    var fourLevelMove = ["#CsecondObj", "#CnineObj"];
    var fourLevelMoveone = fourLevelMove.join(",");
    animateRight();

    function animateRight() {
        $(fourLevelMoveone).stop().animate({
            'marginLeft' : "+=20px" //moves left
         }, 900, 'swing', animateLeft);
    }

    function animateLeft() {
        $(fourLevelMoveone).stop().animate({
            'marginLeft' : "-=20px" //moves right
          }, 900, 'swing', animateRight);
     }
});

这是 fiddle 为它。

更新:添加 stop 并更改边距使其保持在界限内。