jqueryfunctionjquery-animateinfobubble

.remove() doesn't seem to work on my jQuery function


I'm trying to do an animate info speech bubble (I found the css of the bubble here: http://nicolasgallagher.com/pure-css-speech-bubbles/), each time my mouse is over a link I'm creating a div infoBubble and when the mouse is out this div I'm deleting it using .remove(). But when I'm moving really fast my mouse from a link to an other one, .remove() doesn't seem to work on the first buuble.

my jQuery code is:

infoBubble = function(el){
    setTimeout(function() {
        $('body').append('<div class="infoBubble"></div>');
        var bubble = $('.infoBubble:last');      
        var posTop = el.offset().top-el.height()-12;
        var posLeft = el.offset().left+el.width()/2-bubble.width()/2;
        bubble.css({ 'left':posLeft, 'top':posTop-10, 'background-color': 'rgba(0, 0, 0, 0.7)', 'opacity':1 });
            bubble.html('eeeeeeeeee');
            bubble.stop().animate({ 'top':posTop },200); 
        },400);

}

infoBubbleStop = function(){
    var bubble = $('.infoBubble:last');
    bubble.stop().animate({ 'opacity':0 }, 200, 'linear', function(){ bubble.remove(); });
}

$(document).on('mouseover', 'a', function () {
    infoBubble($(this)); 
}).on('mouseout', function() {
    infoBubbleStop();
});

Here a fiddle: http://jsfiddle.net/malamine_kebe/YmKT4/

thanks a lot for helping...


Solution

  • The problem is the timeout, try to modify a little your logic there like this for example:

    http://jsfiddle.net/YmKT4/6/

    infoBubble = function (el) {
        $('body').append('<div class="infoBubble"></div>');
        var bubble = $('.infoBubble:last');
        var posTop = el.offset().top - el.height() - 12;
        var posLeft = el.offset().left + el.width() / 2 - bubble.width() / 2;
        bubble.hide().css({
            'left': posLeft,
            'top': posTop - 10,
            'background-color': 'rgba(0, 0, 0, 0)',
            'opacity': 1
        });
    
        setTimeout(function () {
            bubble.show().html('eeeeeeeeee');
            bubble.animate({
                'top': posTop,
                'background-color': 'rgba(0, 0, 0, 0.7)'
            }, 200);
        }, 400);
    
    }