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...
The problem is the timeout, try to modify a little your logic there like this for example:
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);
}