mercredi 5 août 2015

How to do 2 animations at once with jQuery


I'm working on a web project. I want to draw a div element (looks like a table) with an animation: I click on the button, then the div element appears with a small size upon the button, then it floats to "its" posion meanwhile gaining its original size. I managed to do this, but only sequentely. First the scaling, than the floating. I want these animations to do at the same time.

I use jQuery ui show() function to make the div appear and scale to its origin size, then I use the jQuery animate fuction for the floating.

I tried to use the queue : false property. And I also called the .dequeue() function, but it woulnd't work as I wanted so.

I'll appreciate any pieces of advice. Thanks in advance. Cheers.

 $('#matrix').animate({
        top: positionTop,
        left: positionLeft,
    });
    $('#matrix').show("scale", { percent: 100, direction: 'both', origin: ['top', 'left'] }, 2000);
    $('#matrix').animate({
        top: positionTopAim,
        left: positionLeftAim
    });

Fiddle here: LINK



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire