jquery - mouseenter 中断导致循环点击

Question

我有一些小div，单击它们时，会显示一个更大的div，覆盖所有内容 - 有点像灯箱。为了隐藏大 div，我单击它(没有“关闭此”链接)。

这是点击代码:

// First click - draw in
$('.compositos_DBitem').on('click', function(){
    // Some stuff going on here...
                function(){
                    // Animate the lightbox elements
                    $('.compositos_DBitem_lightbox', this).fadeIn(500);
                    $('.compositos_lightboxBackground').fadeIn(500);
                    // Second click - draw back
                    $(this).on('click', function(){
                        $('.compositos_DBitem_lightbox', this).fadeOut(500);
                        $('.compositos_lightboxBackground').fadeOut(500);
                    });
                });
});

.compositos_lightboxBackground 是覆盖 div 的背景，.compositos_DBitem_lightbox 是大 div。

问题是，点击大div(当它显示时)后，如果您不离开大div区域，它会淡出并重新出现。如果我点击它并快速取出鼠标，它就会起作用。

出了什么问题？

FIDDLE

佩德罗

Answer 1

您更适合使用 fadeToggle，因为截至目前，您正在重复将其他函数绑定(bind)到 click 事件。

// First click - draw in
$('.compositos_DBitem').on('click', function(){
    // Some stuff going on here...
                function(){
                    // Animate the lightbox elements
                    $('.compositos_DBitem_lightbox', this).fadeToggle(500);
                    $('.compositos_lightboxBackground').fadeToggle(500);
                });
});

fadeToggle 完全按照您之前的代码执行的操作，但只允许您绑定(bind)到 click 事件一次。

以前，您的代码会将淡出绑定(bind)到单击事件，并且单击时会立即执行。您之前绑定(bind)到单击事件的其他函数(动画)也是如此。然后，动画将在完成时执行回调...这会再次显示“lightbox”div。