Delayed CSS function doesn't work

Question

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 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

Loktar · Accepted Answer · 2011-02-11 15:46:09Z

2

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);
    });
})

edited Feb 11, 2011 at 15:46

answered Feb 11, 2011 at 15:08

Loktar

35.3k7 gold badges96 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Evanss Over a year ago

Yes it is a duplicate @Loktar. I opened a new question as ive made some progress and I thought I could phrase it better.

Evanss Over a year ago

Ive updated my question and ive used your solution on the link so you can see what I mean. thanks

Community · Accepted Answer · 2017-05-23 12:29:02Z

0

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);
 });
});

edited May 23, 2017 at 12:29

CommunityBot

11 silver badge

answered Feb 11, 2011 at 16:46

Evanss

22.5k101 gold badges327 silver badges563 bronze badges

Collectives™ on Stack Overflow

Delayed CSS function doesn't work

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related