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

Try this:

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

Answer 2

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 3

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 4

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 5

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 6

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

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