中斷mouseenter原因循環點擊

Question

我有一些小divs，當點擊時，顯示一個更大的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的區。如果我點擊它並快速移出鼠標，它就會起作用。

怎麼了？

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事件的其他函數（動畫）也是如此。動畫會在完成時執行它的回調......這再次顯示了'lightbox'div。