jquery: two animate() functions on one click. dela

Question

hey guys, i have a weird and probably rare problem.

The following function is called when a link is clicked.

$(selector).delay(500).animate({ backgroundColor: '#ccc' }, 300).delay(1000).animate({ backgroundColor: '#333' }, 300);

All it does is, it "highlights" the clicked item for 1sec.

On the same link I call a different function further down in my code:

$(selector).animate({'height':'450px' }, 'fast', function() {
    console.log('has a delay')
})

What happens is, that the second animation does not trigger instantly but waits for the first to finish (or something like that).

So the animation of the 'height' value has kind of a timeout.

Any idea how I could solve that?

further information: the first function is called on all links that contain a #hash. So both functions have to be different ones - i can't combine them into one. The second function is just called if one specific link (with a #hash in it) is clicked. So just for this one link both functions are triggered.

Answer 1

Animations are queued by default. If you do not want your animations queued you can specify it in the options for .animate( properties, options )

queue: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately.

Putting that with your example, it might look something like this:

$(selector).animate({
    'height': '450px'
     },{
    duration: 'fast',
    complete: function () {
        console.log('has a delay')
    },
    queue: false
});

Code example showing the queue behavior on jsfiddle.