CODEWITHSUNDEEP
javascriptjqueryjquery-uianimation
Bertie92
Bertie92

Reputation: 707

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

Upvotes: 0

Views: 87

Answers (1)

Juraj Carnogursky
Juraj Carnogursky

Reputation: 355

    var $matrix = $('#matrix');
    // store original size
    var size = {
        width: $matrix.width(),
        height: $matrix.height()
    };
    $matrix.animate({
        top: positionTop,
        left: positionLeft,
    });
    // Sets the width and height to 0
    $matrix.width(0).height(0).show();

    // animates into original size
    $matrix.animate({
        width: size.width,
        height: size.height
    }, {queue: false});

    $matrix.animate({
        top: positionTopAim,
        left: positionLeftAim
    }, {queue: false});

queue: false does the stuff

Here's the workaround

For further working with jQuery, prevent yourself from using the same selector twice/more-than once. It's not efficient. There's a formal directive to store the jQuery object into variable called "$something". For more information visit this site.

Good Luck ;)

Upvotes: 1

Related Questions