CODEWITHSUNDEEP
jqueryfadeout
simon
simon

Reputation: 2387

Jquery stop fadeOut animation on Mouseleave

Is there a way to stop an fadeOut() animation on mouseleave in jQuery? I want the script to work like:

This is what i'm working at:

$(document).ready(function(){    
    $('.this').hover(function(){
        $('#container').fadeIn(200);
    }).mouseleave(function(){
        setTimeout(function () {
        $('#container').fadeOut(200);
    }, 1000);
    })

    $('#container').hover(function(){
        $('#container').stop().show();
    })

});

Fiddle

Upvotes: 1

Views: 2752

Answers (3)

Seimen
Seimen

Reputation: 7250

Like this? http://jsfiddle.net/y36ta/6/

var $container = $('#container');

$('.this').on('mouseover', function(){
    $container.stop(true).fadeIn(200);
}).on('mouseleave', function(){
    $container.stop(true).delay(200).fadeOut(200);
})

$container.on('mouseenter', function(){
    $(this).stop(true).clearQueue().show();
}).on('mouseleave', function() {
    $(this).delay(200).fadeOut(200);
});

Update: use .on() to bind handlers.

Upvotes: 6

Todd
Todd

Reputation: 5454

Heres a jsfiddle. check it out, I think it's what you need. 

$(document).ready(function() {
    $('a').hover(function() {
          $('.this').stop().fadeTo(200, 1, function(){
               $('.this').fadeTo(800, 0.1);
          });
    }, function() {
          $('.this').stop().fadeTo(200, 0.1);
    });
});

hope it helps

Upvotes: 1

Anujith
Anujith

Reputation: 9370

Try this: 

$(document).ready(function () {
    $('.this').hover(function () {
        $('#container').fadeIn(200);
    });
    $('.this').mouseleave(function (e) {
        setTimeout(function () {
            if ($('#container:hover').length != 1) $('#container').fadeOut(200);
        }, 1000);
    });
});

DEMO

Upvotes: 1

Related Questions