Question

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

这是一个简单的工具提示，即你的鼠标中心，它会显示一个淡入淡出的气泡，上面有一些文字，鼠标留下气泡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();

（因为我正在尝试所有事情，所以有点混乱......哈哈）。

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

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

感谢您的帮助。

Answer 1

尝试使用stop(true, true)代替stop()。

来自jQuery文档：

.stop( [clearQueue] [, jumpToEnd] )

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

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

将clearQueue设置为true，您还可以取出clearQueue（）调用。

<强>解释

您遇到问题的原因是当您停止动画时，您将元素保持半转换状态，下一个动画认为该状态为“正常”状态。如果你将一个半可见元素告诉fadeOut，它将保存50％的可见状态，以便稍后告知淡入淡出。如果您将stop告诉jumpToEnd，它将始终以0％或100％的可见度结束。

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

jquery做了我的第一个插件 - 当fadeIn / fadeOut过快时问题

1 个答案: