1

我制作了自己的小工具提示，但是当我走得太快时似乎出现了问题。

这是一个简单的工具提示，即鼠标输入，它会向您显示一个在顶部淡入并带有一些文本的气泡，鼠标离开气泡淡出。

当在几个不同的元素上非常快速地执行 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();

（这有点乱，因为我正在尝试一切......哈）。

我认为我不太了解排队的事情。

这是一个小提琴：http: //jsfiddle.net/denislexic/7YMcu/2/

谢谢你的帮助。

4

1 回答 1

1

尝试使用stop(true, true)而不是stop().

来自 jQuery 文档：

.stop( [clearQueue] [, jumpToEnd] )

clearQueue 布尔值，指示是否也删除排队的动画。默认为假。

jumpToEnd布尔值，指示是否立即完成当前动画。默认为假。

设置为 true ，clearQueue您还可以取出 clearQueue() 调用。

解释

您遇到问题的原因是，当您停止动画时，您会使元素处于半过渡状态，下一个动画将其视为“正常”状态。如果你告诉一个半可见元素淡出，它将保存 50% 的可见状态，以供以后被告知淡入时使用。如果您告诉stop，jumpToEnd它将始终以 0% 或 100% 的可见性结束。

至于 clearQueue，我不相信它必须是真的。jumpToEnd 在这里很重要。您可以使用 clearQueue 值并查看最适合您的情况。

于 2012-04-30T02:12:33.963 回答