2

我有一些小的 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 的区域。如果我单击它并快速取出鼠标，它就会起作用。

怎么了？

小提琴

佩德罗

4

1 回答 1

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 事件的其他功能（动画）也是如此。然后，动画将在完成时执行它的回调……这再次显示了“灯箱”div。

于 2013-05-15T17:02:53.113 回答