jQuery fadeOut等待效果结束后再开始新的效果

Question

我正在制作一些信息框，并将jquery UI剪辑效果与fadeIn/fadeOut相结合。问题是，如果你把盒子放得太快，电子邮件淡出就不会结束。我使用了回调，但不是我的鼠标离开影响了它，就是？

示例：http://jsfiddle.net/6euyze8k/1/

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);
                    });
                });
            }
        }
    });
});

这个想法是在动画结束之前不允许触发事件，但剪辑动画如果你在&元素外。

无论如何，在这里查看：

Fiddle：http://jsfiddle.net/benjasHu/Lchpon4x/

祝你好运！