0

私はアニメーション情報吹き出しをしようとしています (ここで吹き出しの 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();
});

ここでフィドル：http://jsfiddle.net/malamine_kebe/YmKT4/

助けてくれてどうもありがとう...

4

3 に答える 3

2

問題はタイムアウトです。たとえば、次のようにロジックを少し変更してみてください。

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

}
于 2013-04-29T18:00:06.970 に答える
0

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));
});
于 2013-04-29T17:56:08.027 に答える
0

以下のコード行で 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();
});
于 2013-04-29T18:03:19.543 に答える