一个.remove（）似乎并没有对我的jQuery的功能

Question

我试图做一个有生命的信息对话泡泡的工作（我发现这里泡的CSS：http://nicolasgallagher.com/pure-css-speech-bubbles/），每次我的鼠标在链接我创建一个div infoBubble，当鼠标移出这个div时，我使用.remove（）将其删除。但是当我将鼠标从一个链接移动到另一个链接时，.remove（）似乎不适用于第一个。

我jQuery代码是：

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(); 
}); 

这里提琴：

非常感谢帮助...

Answer 1

的问题是超时，尝试修改一点点你的逻辑有这样的例子：

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); 

} 

Answer 2

随着jQuery.stop()功能的jumpToEnd参数，你应该能即使停止动画，也可以运行完整的功能。

现在的问题是，你不会选择正确的bubble，你使用:last之一，所以它将永远是你刚创建的那个。

您应该添加你的泡沫为每个链接，你必须将鼠标悬停：

http://jsfiddle.net/pboissonneault/YmKT4/4/

infoBubble = function(el){ 
      setTimeout(function(el) { 
     el.append('<div class="infoBubble"></div>'); 
     var bubble = $('.infoBubble:last', el);  
     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)', 'opacity':1 }); 
      bubble.html('eeeeeeeeee'); 
      bubble.stop().animate({ 'top':posTop, 'background-color': 'rgba(0, 0, 0, 0.7)' },200); 
     }(el),400); 

} 

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

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

Answer 3

在下面的代码行中将400更改为4：

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)', 'opacity':1 }); 
      bubble.html('eeeeeeeeee'); 
      bubble.stop().animate({ 'top':posTop, 'background-color': 'rgba(0, 0, 0, 0.7)' },200); 
     },4); 

} 

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

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