CODEWITHSUNDEEP
javascriptjqueryqueue
arg20
arg20

Reputation: 4991

jQuery Queue Functions

Take these two methods:

function moveUp() {
     this.element.rotate(0);
     this.element.animate({"margin-top": "-=51px"}, "slow");
     //do some more things for instance.    
}

 function moveRight() {
     this.element.rotate(90);
     this.element.animate({"margin-left": "+=51px"}, "slow");
 }

Just in case, I rotate an object, then move it around with an animation. These functions are mapped to key presses, so if the user presses Up or Right, the object moves. My problem is that the animations are queued properly, because jQuery uses the fx queue for them. But the rotation happens inmediately, as well as any other thing I do, since they are custom things I have in my code.

The consequence is obvious, if you press say up and immediately press right, the object rotates up, but while it is moving upwards, it rotates right, it doesn't really wait until it gets there.

How can I write this code so that the whole methods are chained and not just their animations. I could add callbacks, but they won't always execute together, I need them to be queued if they happen to be called simultaneously, but I don't quite understand how to use the queue functionality in jQuery.

By the way, to see more of the code behind this, I have recently asked this question also: Array of prototype functions

Upvotes: 2

Views: 207

Answers (1)

Oscar
Oscar

Reputation: 925

You could animate it using something like:

    $elem.animate({rotation: 90},
    {
            duration: 'slow',
            step: function(now, fx) {
                    $(this).css({ "transform": "rotate("+now+"deg)", "-webkit-transform": "rotate("+now+"deg)", "-moz-transform": "rotate("+now+"deg)" });
            }
    })

That would add it to the queue automatically

I've made a jsfiddle here:

http://jsfiddle.net/obartra/7Qwgd/1/

EDIT: Just to explain my rationale, I'm guessing that the rotate method you are using is using setTimeout to set the rotation in the CSS progressively, thus not adding it to the animation queue. The code here uses animate to rotate the element so it gets added to the animation queue.

Upvotes: 1

Related Questions