Question

我有一些小div ，点击后会显示一个更大的div ，它覆盖了所有内容 - 有点像灯箱。为了隐藏 big 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 是 big divs 。

问题是，点击 big div （当它显示时），它会淡出并重新进入 - 如果你不离开de big div的区域。如果我点击它并快速取出鼠标，那么它就可以了。

怎么了？

FIDDLE

佩德罗

Answer 1

您最适合使用fadeToggle，因为截至目前，您正在重复将其他功能绑定到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完全按照您之前的代码执行操作，但只允许您绑定click事件一次。

以前，您的代码会将淡出与click事件绑定，并在单击时立即执行。那么你之前绑定到click事件的其他函数（动画）也是如此。然后动画将在它完成时执行它的回调...它再次显示'lightbox'div。

中断的mouseenter导致循环点击

1 个答案: