.remove() 似乎不适用于我的 jQuery 函数

Posted 2023-05-08

【中文标题】.remove() 似乎不适用于我的 jQuery 函数

【英文标题】：.remove() doesn't seem to work on my jQuery function

【发布时间】：2013-04-23 11:52:39

【问题描述】：

我正在尝试制作一个动画信息气泡（我在这里找到了气泡的 css：http://nicolasgallagher.com/pure-css-speech-bubbles/），每次我的鼠标悬停在链接上时，我都会创建一个 div infoBubble 并且鼠标不在这个 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();
);

这里有一个小提琴：http://jsfiddle.net/malamine_kebe/YmKT4/

非常感谢您的帮助...

【问题讨论】：

无论何时调用 stop() 函数，都不会执行回调。

我尝试不使用 stop() 但结果相同

【参考方案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);

【讨论】：

调试后忘记删除

哦，好吧，还有为什么你更喜欢 mouseenter 而不是 mouseover？

仍用于调试目的，但在您的情况下，您可以同时使用两者。请记住，默认情况下，mouseenter 不会冒泡事件，而 mouseover 会这样做。

【参考方案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));
);

【讨论】：

谢谢，但不幸的是，当鼠标从一个鼠标快速移动到另一个鼠标时，同样的问题会出现

【参考方案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();
);