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

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().