CODEWITHSUNDEEP
javascriptjqueryhtmlcss
StuartDTO
StuartDTO

Reputation: 1031

Animation changes the position of div's

Well I've implementes some divs and when I start the page I want them animate, they do, but the problem is that sometimes one div overlaps another one then I see a blank space... How could I avoid this? I'm doing this :

This is how I change the divs : 

function swap(d1, d2){
var topaux, leftaux;
topaux = d1.css("top");
leftaux = d1.css("left");
    d1.animate({
        top: d2.css("top"),
        left: d2.css("left"),
    }, { duration: 1000, queue: false });
    d2.animate({
        top: topaux,
        left: leftaux,
    }, { duration: 1000, queue: false });
}

This is how I'm trying to do it now, but after try this, I didn't have any animation so I had this code and it worked I mean no overlaps between div's....

    d1.css("top", d2.css("top"));
    d1.css("left", d2.css("left"));
    d2.css("top", topaux);
    d2.css("left", leftaux);

I call this function (swap) when I'm shuffling the divs as follows : 

function swapdivs(){
var i,r, c, d1, d2;
for (i = 1; i < 100; i++) {
    r = Math.floor((Math.random() * rows) + 1);
    c = Math.floor((Math.random() * columns) + 1);
    d1= $("#r"+r+"c"+c);
    r = Math.floor((Math.random() * rows) + 1);
    c=Math.floor((Math.random() * columns) + 1);
    d2 = $("#r"+r+"c"+c);
    swap(d1,d2);
}
}

This is the jfiddle What I'm missing?

Upvotes: 0

Views: 150

Answers (1)

pumpkinzzz
pumpkinzzz

Reputation: 2967

Ok, now i see the problem.

In your barrejarPeces function you're scrambling randomly all elements multiple times (100)

for (i = 1; i < 100; i++) {

In the interanvipeces function you try to switch the position of 2 different elements with an animation of 1000ms, calculating their css attributes top and left

Well, the problem is when one (or both) elements are already switching position (since the barrejarPeces function will scramble 100 times without waiting any animation to finish), top and left values won't be correct.

So there are 2 possible solutions:

  1. Don't use animation delay (try to set to 0 instead of 1000 in your fiddle and you'll see it works)
  2. Scramble all elements just once (see my example here, where i changed some logic)

Upvotes: 1

Related Questions