CODEWITHSUNDEEP
jquery
tonymx227
tonymx227

Reputation: 5451

Mouseover with jQuery, too fast with the mouse

I get an issue using "mouseover" function with jQuery.

When I'm too fast with the mouse on my element I lose the "mouseleave" function and my element don't delete himself...

My JSFiddle : http://jsfiddle.net/tonymx227/4YRuf/5/

My code :

$('figure').children('img').on('mouseover', function(e){
    $(this).parent().append('<div id="figure-over"><a href="'+$(this).parent().data('url')+'" target="_blank">Voir</a></div>');
    $(this).parent().children('#figure-over').stop().slideDown();
    $(this).parent().children('#figure-over').on('mouseleave', function(){
        $(this).stop().slideUp( function(){
            $(this).remove();
        });
    }).on('click', function(){
        window.open($(this).children('a').attr('href'));
    });
});

Upvotes: 3

Views: 1943

Answers (2)

BENARD Patrick
BENARD Patrick

Reputation: 30975

Try something like this : http://jsfiddle.net/4YRuf/13/

With this : You can quickly move your mouse and the result is much better. And use of class instead of id...

$('figure').children('img').on('mouseover', function(e){
    $('.figure-over').remove();
    $(this).parent().append('<div class="figure-over"><a href="'+$(this).parent().data('url')+'" target="_blank">Voir</a></div>');
    $(this).parent().children('.figure-over').stop().slideDown();
    $(this).on('mouseleave', removeIt)
    $(this).parent().children('.figure-over').on('mouseleave', removeIt).on('click', function(){
        window.open($(this).children('a').attr('href'));
    });
});


function removeIt()
{    
    if( ! $('.figure-over').is(':hover') )
    {

        $('.figure-over').stop().slideUp( function(){

                $(this).remove();
            });
    }
}

UPDATE :

works better with : http://jsfiddle.net/4YRuf/17/

$('figure').children('img').on('mouseover', function(e){

    if ( $('.figure-over').length == 0)
    {
         $(this).parent().append('<div class="figure-over"><a href="'+$(this).parent().data('url')+'" target="_blank">Voir</a></div>');   
    }

    $(this).parent().children('.figure-over').stop().slideDown();
    $(this).on('mouseleave', removeIt)
    $(this).parent().children('.figure-over').on('mouseleave', removeIt).on('click', function(){
        window.open($(this).children('a').attr('href'));
    });
});


function removeIt()
{    
    if( ! $('.figure-over').is(':hover') )
    {

        $('.figure-over').stop().slideUp( function(){

                $(this).remove();
            });
    }
}

Upvotes: 1

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93571

Try something like this (I switched to using mouseout):

http://jsfiddle.net/4YRuf/14/

$('figure').children('img').on('mouseover', function (e) {
    if (!$(this).parent().find('#figure-over').length){
        $(this).parent().append('<div id="figure-over"><a href="' + $(this).parent().data('url') + '" target="_blank">Voir</a></div>');
        $(this).parent().children('#figure-over').slideDown();
    }
});
$(document).on('mouseout', '#figure-over', function () {
    $(this).stop().slideUp(function () {
        $(this).remove();
    });
}).on('click', '#figure-over', function () {
    window.open($(this).children('a').attr('href'));
});

basically assume your mouseenter events will occur repeatedly and check before adding the child objects again. You also need to connect to the leave events outside the enter event to avoid accidentally chaining multiple events - although the contains check would avoid this too. e.g.

$('figure').children('img').on('mouseover', function (e) {
    if (!$(this).parent().find('#figure-over').length){
        $(this).parent().append('<div id="figure-over"><a href="' + $(this).parent().data('url') + '" target="_blank">Voir</a></div>');
        $(this).parent().children('#figure-over').stop().slideDown();
        $(this).parent().children('#figure-over').on('mouseoutfunction () {
            $(this).stop().slideUp(function () {
                $(this).remove();
            });
        }).on('click', function () {
            window.open($(this).children('a').attr('href'));
        });
    }
});

Upvotes: 1

Related Questions