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