Question

我正在制作一些信息框并将jquery UI剪辑效果与fadeIn / fadeOut结合使用。问题是如果你快速离开盒子，电子邮件淡出就没有完成。我使用了回调但它是影响它的mouseleave还是？

jQuery(".holder").each(function (index, element) {
    var infos = jQuery(this).find('.info,.socials');
    var docmail = jQuery(this).find('.email');

    jQuery(this).on({
        mouseenter: function () {
            infos.show("clip", function () {
                docmail.fadeIn(500);
            });
        },
        mouseleave: function () {
            docmail.fadeOut(500, function () {
                infos.hide("clip");
            });
        }
    });
});

感谢任何帮助。

Answer 1

我已经做到了可以解决你的问题：

jQuery(".holder").each(function (index, element) {
    var $el = jQuery(this);
    var infos = $el.find('.info,.socials');
    var docmail = $el.find('.email');
    $el.data('endEnter', false);
    $el.data('endLeave', true);

    $el.on({
        mouseenter: function () {
            if($el.data('endLeave')) {
                infos.show("clip", function () {
                    docmail.fadeIn(500, function() {
                         $el.data('endEnter', true);
                        $el.data('endLeave', false);
                    });
                });
            }

        },
        mouseleave: function () {
            if($el.data('endEnter')) {
                docmail.fadeOut(500, function () {
                    infos.hide("clip", function() {
                         $el.data('endLeave', true);
                        $el.data('endEnter', false);
                    });
                });
            }

        }
    });
});

这个想法是在动画结束之前不允许触发事件，但是如果你快速移动光标， clip 动画会产生一些问题。超出要素。

无论如何，请在这里查看：

小提琴：http://jsfiddle.net/benjasHu/Lchpon4x/

祝你好运！

jQuery fadeOut在开始新效果之前等待效果完成

1 个答案: