CODEWITHSUNDEEP
javascriptjquery
user3180105
user3180105

Reputation: 381

jquery delay mouseOut effect?

I'm having trouble attaching a delay to my mouseOut function. Here's the jquery code:

$(document).ready(function() {
$('.nav').mouseover(function() {
    $('.nav').css({ left: '160px' });
});
$('.nav').mouseout(function() {
    $('.nav').delay(600).css({ left: '0' });
});
});

I figured that adding the delay section in would do it... but it still behaves as though it wasn't there at all.

Suggestions?

EDIT

The suggested setTimeout function worked - but created a new problem. This effect now triggers even when still over the selected '.nav' div.

Here's a jsfiddle of the problem: http://jsfiddle.net/TRL4w/

Upvotes: 2

Views: 1284

Answers (2)

Sergio
Sergio

Reputation: 28837

Try using .mouseover() and .stopPropagation();

Example:

$(document).ready(function () {
    $('header').hover(function (e) {
        e.stopPropagation();
        console.log('in');
        $('.nav').css({
            left: '160px'
        });
    },function () {
        console.log('out');
        setTimeout(function () {
            $('.nav').css({
                left: '0px'
            });
        }, 2000)
    });
});

Demo

Upvotes: 1

j08691
j08691

Reputation: 207861

The delay() function only works with animations. Try:

$('.nav').mouseout(function() {
    setTimeout(function(){$('.nav').css({left: '0'});}, 600)
});

From the .delay() docs:

The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.

Upvotes: 6

Related Questions