關閉功能不工作在Jquery

Question

我想關閉一個彈出DIV使用關閉功能與jQuery，它工作之前，我添加了DIV的位置功能，並且我確實必須打破該功能.. 。我猜這是某個地方的語法錯誤，任何新的眼睛都願意看看？

泰華工作網站是在www.masterfade.com/maptest

下面的代碼：

$(document).ready(function() { 

    $('.lightbox').click(function (event) { 
     event.preventDefault(); 
     $('.backdrop, #box').animate({ 
      'opacity': '.50' 
     }, 300, 'linear'); 
     $('#box').animate({ 
      'opacity': '1.00' 
     }, 300, 'linear'); 
     $('.backdrop, #box').css('display', 'block'); 
    }); 

    $('.lightbox2').click(function (event) { 
     event.preventDefault(); 
     $('#box2').css({ 
      left: function() { 
       return event.pageX - $(this).width(); 
      }, 
      top: function() { 
       return event.pageY - $(this).height(); 
      } 
     }); 
     $('.backdrop, #box2').animate({ 
      'opacity': '.50' 
     }, 300, 'linear'); 
     $('#box2').animate({ 
      'opacity': '1.00' 
     }, 300, 'linear'); 
     $('.backdrop, #box2').css('display', 'block'); 
    }); 
}); 

$('.backdrop, #box2').animate({ 
    'opacity': '.50' 
}, 300, 'linear'); 
$('#box2').animate({ 
    'opacity': '1.00' 
}, 300, 'linear'); 
$('.backdrop, #box2').css('display', 'block'); 


$('.close').click(function() { 
    close_box(); 
}); 

$('.backdrop').click(function() { 
    close_box(); 
}); 



function close_box() { 
    $('.backdrop, #box, #box2').animate({ 
     'opacity': '0' 
    }, 300, 'linear', function() { 
     $('.backdrop, #box, #box2').css('display', 'none'); 
    }); 
} 

Answer 1

我覺得你的事件綁定和動畫功能之前DOM元素負載通話。所以事件綁定不起作用。

我希望以下代碼能夠正常工作。

$(document).ready(function() { 

    $('.lightbox').click(function (event) { 
     event.preventDefault(); 
     $('.backdrop, #box').animate({ 
      'opacity': '.50' 
     }, 300, 'linear'); 
     $('#box').animate({ 
      'opacity': '1.00' 
     }, 300, 'linear'); 
     $('.backdrop, #box').css('display', 'block'); 
    }); 

    $('.lightbox2').click(function (event) { 
     event.preventDefault(); 
     $('#box2').css({ 
      left: function() { 
       return event.pageX - $(this).width(); 
      }, 
      top: function() { 
       return event.pageY - $(this).height(); 
      } 
     }); 
     $('.backdrop, #box2').animate({ 
      'opacity': '.50' 
     }, 300, 'linear'); 
     $('#box2').animate({ 
      'opacity': '1.00' 
     }, 300, 'linear'); 
     $('.backdrop, #box2').css('display', 'block'); 
    }); 


    $('.backdrop, #box2').animate({ 
     'opacity': '.50' 
    }, 300, 'linear'); 
    $('#box2').animate({ 
     'opacity': '1.00' 
    }, 300, 'linear'); 
    $('.backdrop, #box2').css('display', 'block'); 

    // following lines are edited 

    $('.close,.backdrop').click(close_box); 

    function close_box() { 
     $('.backdrop, #box, #box2').animate({ 
      'opacity': '0' 
     }, 300, 'linear', function() { 
      $('.backdrop, #box, #box2').css('display', 'none'); 
     }); 
    } 
}); 

Answer 2

所以，

我瀏覽到您的網站，並與谷歌Chrome開發人員工具（控制檯） iv'e手動調用$('.lightbox').click()和close_box()，它似乎是工作的例外，沒有JavaScript異常拋出。

但是，我不確定你甚至不明白什麼是不工作。

我強烈建議您將Chrome瀏覽器與開發人員工具一起使用，這將使您的生活方式更輕鬆地進行Web開發。

使用此功能，您可以監控javascript錯誤並逐行調試您的代碼。

好運