jquery 做了我的第一个插件-当它太快时出现淡入/淡出问题

Question

我自己做了一个小工具提示，但是当我走得太快时似乎有问题。

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

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

感谢您的帮助。

Answer 1

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

来自 jQuery 文档：

.stop( [clearQueue] [, jumpToEnd] )

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

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

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

说明

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

至于 clearQueue，我不相信它一定是真的。 jumpToEnd 在这里很重要。您可以使用 clearQueue 值，看看哪种方法最适合您的情况。