关闭功能不工作在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错误并逐行调试您的代码。

好运