Delay CSS function in Jquery?

Question

How can I delay a CSS change in jquery? Here is my code:

$(\"document\").ready(function() {
    $(\".pressimage img\").mouseenter(function() {
        $jq(this)         


        

Answer 1

Note that sanon's solution above is more natural than this one because it uses jQuery's .queue method instead of abusing .animate for the same purpose.

Original answer below:

---

setTimeout is the most natural way to go, but if you want to stay in your jQuery function chain, you can use an animate function with duration 0.

Example:

$("img").delay(1000).animate({'z-index': 1000},0)

If you want to do anything else than numeric css changes, then you do need to create a function, but that can still happen within that animate call:

$("img").delay(1000).animate({zoom:1},0,function(){$(this).src('otherImage.png');})

I'm just putting that zoom:1 there because if you specify an empty object {} there, it is not considered a real effect, so doesn't go on the effects queue, so immediately executes the complete function.