CODEWITHSUNDEEP
javascriptjqueryjquery-animate
Nicholas Ayoub
Nicholas Ayoub

Reputation: 89

Animate more than one more div

I've tried the .join() function jQuery has to animate more than one object at the same time.

It failed my expectations. Here is my code. Please tell me why exactly this wouldn't work?

$(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);
 }
});

Upvotes: 0

Views: 54

Answers (1)

TheVillageIdiot
TheVillageIdiot

Reputation: 40507

Will you try this:

$(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);
     }
});

Here is fiddle for it.

Update: Adding stop and changing margin keeps it in bounds.

Upvotes: 1

Related Questions