1

自分で小さなツールチップを作成しましたが、速すぎると問題が発生するようです。

これは単純なツールチップです。つまり、mouseenterを実行すると、テキストが上にフェードインするバブルが表示され、バブルをfadeOutにマウスアウトします。

この問題は、いくつかの異なる要素で非常に高速なmouseenter / mouseleaveを実行すると発生します...最初は、0.6のようにフェードし始め、最終的には表示されません。

キューイングと関係があると思います。そこで、stop（）とclearqueue（）を試しましたが、それでも機能しません。

プラグインは次のとおりです。

(function ($) {


    $.fn.tooltip = function (options) {

        var selector = $(this).selector;
        var defaults = {
            fadeInSpeed:350,
            fadeOutSpeed:200,
            delayIn: 350,
            delayOut: 300,
            popupId:'tooltip_popup',
            verticalOffset: 30
        };
        var settings = $.extend({}, defaults, options);

        $(document).delegate(selector, 'mouseenter', function (e) {
            var $this = $(this);
            var title = $this.attr('title');
            $this.attr('title', '');


            if (title !== '') {
                if ($('#' + settings.popupId).text() === '') {
                    $('<div />').attr('id', settings.popupId)
                        .appendTo('body')
                        .css({
                            position:'absolute',
                            backgroudColor: 'black',
                            zIndex: 5
                        })
                        .addClass('tooltip_style')
                        .hide();
                    $('<div />').appendTo('#' + settings.popupId).addClass('tooltip_arrow');
                    $('<span />').appendTo('#' + settings.popupId);
                } else {
                    $('#' + settings.popupId).hide().stop().clearQueue().hide();
                }

                var ele_x = $this.offset().left;
                var ele_y = $this.offset().top;

                $('#' + settings.popupId+' span').text(title);

                $('#' + settings.popupId)
                    .css({
                        top : ele_y - settings.verticalOffset,
                        left: ele_x
                    })
                    .delay(settings.delayIn)
                    .fadeIn(settings.fadeInSpeed);
            }

        });

        $(document).delegate(selector, 'mouseleave', function (e) {
            var $this = $(this);

            $('#' + settings.popupId)
                .delay(settings.delayOut)
                .fadeOut(settings.fadeOutSpeed);
            $this.attr('title', $('#' + settings.popupId+' span').text() );

        });

        return this;
    }


})(jQuery);

お気づきかもしれませんが、この行は修正が必要な行だと思います。

$('#' + settings.popupId).hide().stop().clearQueue().hide();

（私がすべてを試していたので、それは少し厄介です... ha）。

私はこの待ち行列のことを完全には理解していないと思います。

ここにフィドルがあります：http：//jsfiddle.net/denislexic/7YMcu/2/

助けてくれてありがとう。

4

1 に答える 1

1

stop(true, true)の代わりに使用してみてくださいstop()。

jQueryドキュメントから：

.stop( [clearQueue] [, jumpToEnd] )

clearQueue キューに入れられたアニメーションも削除するかどうかを示すブール値。デフォルトはfalseです。

jumpToEnd現在のアニメーションをすぐに完了するかどうかを示すブール値。デフォルトはfalseです。

trueにclearQueue設定すると、clearQueue（）呼び出しを実行することもできます。

説明

問題が発生している理由は、アニメーションを停止すると、要素が半分遷移した状態のままになり、次のアニメーションが「通常の」状態と見なすためです。半透明の要素にfadeOutを指示すると、後でfadeInを指示されたときのために、50％の可視状態が保存されます。に指示stopするとjumpToEnd、常に0％または100％の可視性で終了します。

clearQueueに関しては、それが真である必要があるとは確信していません。ここで重要なのはjumpToEndです。clearQueue値を試して、自分のケースで何が最適かを確認できます。

于 2012-04-30T02:12:33.963 に答える