Delayed CSS function doesn't work

Im trying to delay a CSS function. Here is my site: http://smartpeopletalkfast.co.uk/ppr6/press

When you hover over the top left image it expands to cover the image below it. Ive used the code below (its in the page head) to change it's z-index so the image which is expanding is always visible over any others:

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

This code works, but as soon as you mouse-off the image its z-index changes, so it doesn't stay visible while its resizing back to a thumbnail. What I need is for the z-index to return to 1 after the animation is complete, or for the z-index change to have a delay of about 1/2 a second. I figured the 2nd solution would be simpler.

I tried to use the following, It does set the z-index to 100 but never turns it back to 1.

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

Thanks

UPDATE. Im posting this here as you cant see code开发者_如何学Go in the comments. Here is my actual code with your suggestion. The jq is used to avoid a jquery version conflict, its working fine for the other js on my site.

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

        $jq(this).stop().animate({
            width: 260
            });
    });
    $jq(".pressimage img").mouseleave(function() {
        $jq(this).stop().animate({
            width: 130
            });
    });
});


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

The code works for the most part now but does sometimes leave images with a z-index of 100. Thanks

---

Inside of the settimeout $(this) will not refer to the element. Make a reference to this outside of the timeout function, and refer to the reference when inside of the function.

http://jsfiddle.net/yK5ga/2/

First answer Change it to

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

I did have it in the js fiddle from yesterday, maybe it was overlooked because I really didn't format it as nicely as I could of.

Answer to update

Have you tried combining them into the same function like so?

http://jsfiddle.net/yK5ga/3/

as it stands right now you have the same event doing different things tied to the same element.

Updated code

$("document").ready(function() {
    var timer;
    $("img").mouseenter(function() {

        $(this).stop().animate({
            width: 260
        });

        $(this).css('z-index','100');
        clearTimeout(timer);
    });
    $("img").mouseleave(1000,function() {
        var that = $(this);

        $(this).stop().animate({
            width: 130
        });

         timer = setTimeout(function(){
            that.css('z-index','1');
         }, 500);
    });
})

---

Answered here by Ken Redler:

Delay CSS function in Jquery?

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