Question

我有一个简单的功能，如：

$('.lightbox_trigger').click(function() {
  $('html,body').animate({
    scrollTop: ($(this).height() * 0.5) + $(this).offset().top - ($(window).height() / 2)}, 500);
  $('#lightbox').fadeIn("slow");
});

这个想法是，当你点击lightbox_trigger类时，你将该图像滚动到页面的中间（第1部分），然后淡入灯箱（第2部分）。

除了我似乎在这个函数的第1部分和第2部分之间发生了一个非常奇怪的冲突。如果我删除$('#lightbox').fadeIn("slow");一切都按预期工作。但是，只要我添加它，它只能在第一次工作 - 即灯箱淡入的时间。一旦灯箱可见，滚动动画不再适用于点击。

有什么想法？谢谢！

Answer 1

我是个白痴。灯箱本身覆盖了lightbox_trigger图像，显然阻止了点击功能的发生。

所以，要么我可以为#lightbox（http://css-tricks.com/almanac/properties/p/pointer-events/）添加一个pointer-events: none;类，要么我可以更改#lightbox div，以便不覆盖触发器（即更改z - 索引，宽度等）。

.click（）函数的某些部分无法一起工作

1 个答案: