我正在创建一个站点，您可以在其中单击一个按钮，然后会显示一个小面板。 （就像 facebook 上的通知/消息面板）
该功能可以正常工作，但是当面板隐藏时，您仍然可以将链接悬停在它们应该在的位置，当它们可见时。我使用opacity 而不是display 来隐藏我的div，这样我就可以制作一个漂亮的淡入淡出动画。
这是我的所有代码以及该函数的工作示例：
我尝试在不可见时放入height: 0; overflow: hidden;，在可见时放入height: auto; overflow: visible;，并通过这样做将它们排除在动画之外：transition: top 0.15s, opacity 0.15s
当面板显示时它工作正常，但当你想再次隐藏它时它不会。看这个例子：
所以我的问题基本上是；如何防止我的隐藏 div 中的元素“可点击”并且仍然保留我的淡入淡出动画？
希望有人可以帮助我：D
【问题讨论】：
几点建议：
你可以做这样的事情：
$('.notify-box').fadeToggle().toggleClass('show');
// either hide the box using css OR on initialization:
$('.notify-box').fadeOut(0).removeClass('show');
【讨论】：
“我使用 opacity 代替 display 来隐藏我的 div，所以我可以制作一个不错的淡入淡出动画。”
这是错误的。
在将 div 从隐藏切换到显示时，您可以制作“漂亮的淡入淡出动画”。
所以你需要做的是真正隐藏 div，这样它就不会被点击，并在你显示它时应用你的动画。看看 jquery animate (http://api.jquery.com/animate/)。
您还可以使用插件来轻松制作漂亮的动画。对于这个看看 jQueryUI (http://jqueryui.com/effect)
【讨论】：
为什么不使用简单的slideToggle()？像这样：http://jsfiddle.net/S5LvY/4/
$(".notify-icon").click(function () {
$(".notify-box").slideToggle("fast");
});
【讨论】：
解决方案在 CSS 部分而不是在 jQuery 中
使用下面的 CSS 就可以了
.notify-box {
width: 200px;
background: #FFF;
position: absolute;
height: 0;
top: 50px;
left: 0;
opacity: 0;
z-index: 9998;
-webkit-transition: all 0.15s;
-moz-transition: all 0.15s;
-o-transition: all 0.15s;
-ms-transition: all 0.15s;
transition: all 0.15s;
}
.notify-box.show {
top: 70px;
opacity: 1;
height: auto;
}
.notify-box .content {
width: 100%;
height: inherit;
overflow: auto;
}
解决方案来自通知框的高度，隐藏时高度应为0，可见时高度应为自动
最重要的部分是将.content高度设置为继承，以便它的高度应该根据通知框高度进行更改
【讨论】：
如果您出于性能或其他原因想要或必须坚持使用 CSS 3 过渡，那么您可以使用 window.setTimeout 在将显示属性设置为无的超时时间之后添加一个类。这应该可以防止链接被点击，消除悬停效果并防止屏幕阅读器阅读隐藏的内容。
这方面的明显缺陷是 setTimeout 时间段需要与过渡中使用的时间段相同，这会带来维护成本。
更新：
感谢 DoXicK，我创建了一个 JSFiddle which uses the transitionEnd event，以便在浏览器中提供标准转换属性时将“隐藏”类添加到通知框。如上所述，它会退回到 setTimeout。
// Notify Box
(function() {
var $notifyBox = $(".notify-box");
var supportsStandardTransition = ($notifyBox[0].style['transition'] !== undefined);
if (supportsStandardTransition) {
$notifyBox.on('transitionEnd', function() {
$(this).addClass('hide');
});
}
$(".notify-icon").on('click', function(){
if ($notifyBox.hasClass('show')) {
$notifyBox.removeClass('show');
if (!supportsStandardTransition) {
window.setTimeout(function () {
$notifyBox.addClass('hide');
}, 150);
}
} else {
$notifyBox.addClass('show').removeClass('hide');
}
});
})();
CSS-
.notify-box {
background: #FFF;
position: absolute;
top: 50px;
left: 0;
opacity: 0;
top: 70px;
-ms-transition: opacity 0.15s ease-in-out;
-moz-transition: opacity 0.15s ease-in-out;
-o-transition: opacity 0.15s ease-in-out;
-webkit-transition: opacity 0.15s ease-in-out;
transition: opacity 0.15s ease-in-out;
width: 200px;
z-index: 9998;
}
.notify-box.show {
opacity: 1;
-ms-transition: none;
-moz-transition: none;
-o-transition: none;
-webkit-transition: none;
transition: none;
}
.notify-box.hide {
display: none;
}
我还修改了 HTML，最初将“隐藏”类添加到通知框，在 CSS 中添加了一个类定义，并将过渡样式调整为特定于不透明度，并删除了“显示”类时的过渡已应用 - 使通知框“立即”出现（浏览器可以呈现它的速度）并且仅在隐藏时转换。我还把 top 属性移到了 .notify-box 类，所以它在隐藏时不会移动，这看起来很奇怪。
【讨论】：
不透明度不会从元素列表中删除对象。因此，悬停仍然在其上。使用 toggleClass 的回调函数 例如：
$(".notify-box").toggleClass('show').promise().done(function()
{
// your code to hide
});
或使用其他一些动画方法，如 jQuery 的 animate。
【讨论】：