. 내 jQuery 함수에서 .remove()가 작동하지 않는 것 같습니다.

Question

애니메이션 입력 음성 거품 (여기에 거품의 CSS를 발견했습니다 : http://nicolasgallagher.com/pure-css-speech-bubbles/)을 할 때마다 마우스가 링크 위에 있습니다. div 정보 블럭을 만들고 마우스가이 div 밖으로 나왔다면 .remove()를 사용하여 삭제할 것입니다. 그러나 링크를 다른 마우스로 빠르게 움직일 때 .remove()는 첫 번째 buuble에서 작동하지 않는 것 같습니다.

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

바이올린 :

감사 돕는 많은 ... jQuery.stop() 함수의 jumpToEnd 매개 변수와

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

, 당신은 할 수 있어야 애니메이션을 멈추더라도 완전한 기능을 실행하십시오.

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