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).css('z-index','1000');
            });
    $(".pressimage img").mouseleave(1000,function() {
        $jq(this).css('z-index','1');
            });
});

I need the mouseleave function to occur about 1/2 a second after the mouse leaves.

Im using some other jquery to make images expand on mouseover. When they expand they cover each other, so I need the z-index of the animated image to be higher than the other. Then when the mouse leaves the z-index has to return to normal.

The above code works except that the z-index changes as soon as the mouse leaves, so the animation doesn't have time to complete. I therefore need to delay the mouseleave function a bit. Thanks

UPDATE

Here is my site: http://smartpeopletalkfast.co.uk/ppr6/press

Ive put my code in the head:

 $jq("document").ready(function() {

    $jq(".pressimage img").mouseenter(function() {
        $jq(this).css('z-index','100');
            });

    $jq(".pressimage img").mouseleave(function() {
        $jq(this).css('z-index','1');
            });

});

This code is working fine but doesn't have any delay. If you hover over the top left image it works fine but as soon as you mouse off it goes behind the image below it. Thanks

Answer 1

Try this:

$(".pressimage img").mouseleave( function(){
    var that = this;
    setTimeout( function(){
      $(that).css('z-index','1');
    },500);
 });

Answer 2

Delay only works on items in the queue so you need to add your css change to the queue for the delay to work. Then dequeue. The following code illustrates this:

$('.pressimage img')
    .delay(1000)
    .queue(function(){
        $(this).css({'z-index','1'});
        $(this).dequeue();
    });

Answer 3

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.

Answer 4

You can do this with setTimeout();

$("document").ready(function() {
    var timer;
    $(".pressimage img").mouseenter(function() {
        $jq(this).css('z-index','1000');
        clearTimeout(timer);
    });
    $(".pressimage img").mouseleave(1000,function() {
         timer = setTimeout(function(){
            $jq(this).css('z-index','1');
         }, 500);
    });
});

The code in setTimeout(code, delay) executes after delay milliseconds. You might have problems with unintended changes if you were to move the mouse about too quickly, so I have cleared the timeout action on mouseenter().

Answer 5

$("document").ready(function() {
$(".pressimage img").mouseenter(function() {
    $jq(this).css('z-index','1000');
        });
$(".pressimage img").mouseleave(1000,function() {
    $jq(this).delay(500).css('z-index','1');
        });
});

Does this work? :)

Answer 6

http://jsfiddle.net/loktar/yK5ga/

Check that one out what I am doing is assigning the timeout to a variable and then clearing it on mouseover, so it wont fire if you do a mouse over quickly.

$("document").ready(function() {
    var imgTimeout;

    $("img").hover(
        function() {
            clearTimeout(imgTimeout);
            $(this).css('z-index','1000');
    },
    function() {
        var element = $(this);
        imgTimeout = setTimeout(function(){element.css('z-index','1');}, 1000); 
    });
});

Answer 7

Try the following.

jQuery.fn.extend({
    qcss: function(map){
        $(this).queue(function(next){ 
            $(this).css(map); 
            next(); 
        });

        return this;
    }
});

Answer 8

http://forum.jquery.com/topic/delay-css

tested and working for my purpose of delaying a css property following an animate.