jquery - 防止隐藏div中的元素为 'clickable'

Question

我正在创建一个站点，您可以在其中单击一个按钮，然后会显示一个小面板。 (就像 facebook 上的通知/消息面板)

该功能运行良好，但当面板隐藏时，您仍然可以将链接悬停在它们应该位于的位置，当它们可见时。我正在使用 opacity 而不是 display 来隐藏我的 div，因此我可以制作一个漂亮的淡入淡出动画。

这是我的所有代码以及该函数的一个工作示例:

http://jsfiddle.net/S5LvY/

---

我试着输入一个 height: 0; overflow: hidden; 不可见时，height: auto; overflow: visible; 当可见时，通过执行以下操作将它们从动画中移除:transition: top 0.15s, opacity 0.15s

它工作正常，当面板显示时，但当你想再次隐藏它时它不会。看这个例子:

http://jsfiddle.net/S5LvY/2/

---

所以我的问题基本上是；如何防止我隐藏的 div 中的元素“可点击”并仍然保留我的淡入淡出动画？

希望有人能帮助我:D

• 谢谢

Answer 1

一些提示:

• jQuery fadeOut, fadeIn, fadeToggle
• CSS3 "pointer-events"

你可以做这样的事情:

$('.notify-box').fadeToggle().toggleClass('show');

// either hide the box using css OR on initialization:
$('.notify-box').fadeOut(0).removeClass('show');