Javascript jquery做了我的第一个插件——fadeIn/fadeOut在速度过快时出现问题_Javascript_Jquery

Javascript jquery做了我的第一个插件——fadeIn/fadeOut在速度过快时出现问题

javascript jquery

Javascript jquery做了我的第一个插件——fadeIn/fadeOut在速度过快时出现问题,javascript,jquery,Javascript,Jquery,我自己做了一个小提示，但当我走得太快时，似乎会出现问题这是一个简单的工具提示，即你用鼠标点击，它会显示一个气泡，上面有一些文字淡出，鼠标将气泡淡出当在几个不同的元素上快速移动鼠标时，会出现此问题。。。首先，它开始只衰减到0.6，然后最终不显示我猜这和排队有关。所以我尝试了stop（）和clearqueue（），但仍然不起作用以下是插件： (function ($) { $.fn.tooltip = function (options) { var selec

我自己做了一个小提示，但当我走得太快时，似乎会出现问题

这是一个简单的工具提示，即你用鼠标点击，它会显示一个气泡，上面有一些文字淡出，鼠标将气泡淡出

当在几个不同的元素上快速移动鼠标时，会出现此问题。。。首先，它开始只衰减到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);

（有点乱，因为我什么都试过了……哈）

我想我不太明白排队这件事

这是一把小提琴：

谢谢您的帮助。

尝试使用

stop（true，true）

而不是

stop（）

从jQuery文档中：

.stop（[clearQueue][，jumpToEnd]）

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

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

当

clearQueue

设置为true时，还可以执行clearQueue（）调用

解释

出现问题的原因是，当停止动画时，元素处于半转换状态，下一个动画将其视为“正常”状态。如果你告诉一个半可见的元素淡出，它将保存50%的可见状态，以便稍后它被告知淡出。如果您告诉

stop

到

jumpToEnd

，它将始终以0%或100%的可见性结束

至于clearQueue，我不相信它一定是真的。跳到终点是这里最重要的事情。您可以使用clearQueue值，看看什么在您的情况下最有效。