Question

我正在创建一个网站，您可以点击按钮，然后会显示一个小面板。 （与Facebook上的通知/消息面板一样）

该功能正常，但是当面板被隐藏时，您仍然可以悬停链接，它们应该在可见的位置。我使用opacity而不是display来隐藏我的div，所以我可以制作一个很好的淡入淡出动画。

以下是我的所有代码，其中包含函数的实例：

我尝试在height: 0; overflow: hidden;看不见时放入height: auto; overflow: visible;，transition: top 0.15s, opacity 0.15s可见，并通过这样做将其留在动画中：{{1}}

当显示面板时它工作正常，但是当你想要隐藏它时，它不会。见这个例子：

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');

Answer 2

“我正在使用不透明度显示隐藏我的div，所以我可以制作一个很好的淡入淡出动画。”

这是错误的。

将div从hide切换为show时，你可以制作一个“漂亮的淡出动画”。

所以你需要做的就是真正隐藏div，这样它就不会被点击，并在你显示它时应用你的动画。查看jquery animate（http://api.jquery.com/animate/）。

你也可以使用插件轻松实现漂亮的动画效果。这个看看jQueryUI（http://jqueryui.com/effect）

Answer 3

为什么不使用简单的slideToggle()？像这样：http://jsfiddle.net/S5LvY/4/

$(".notify-icon").click(function () {
    $(".notify-box").slideToggle("fast");
});

Answer 4

不透明度不会从元素列表中删除对象。因此，悬停仍在其上。使用toggleClass的回调函数，例如：

$(".notify-box").toggleClass('show').promise().done(function()
{  
     // your code to hide
});

或使用其他一些动画方法，例如jQuery的animate。

Answer 5

如果您出于性能或其他原因需要或必须坚持使用CSS 3转换，那么您可以使用window.setTimeout在超时期限之后添加一个类，将display属性设置为none。这样可以防止链接被点击，删除悬停效果并阻止屏幕阅读器阅读隐藏内容。

显而易见的缺陷是setTimeout期间需要与转换中使用的期间相同，这会带来维护成本。

更新：

感谢DoXicK，我创建了一个JSFiddle which uses the transitionEnd event来添加＆＃39;隐藏＆＃39;如果标准转换属性在浏览器中可用，则转到通知框。它如上所述回退到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，以便最初添加＆＃39;隐藏＆＃39;类到通知框，在CSS中添加了一个类定义，并调整了特定于不透明度的过渡样式，并在显示＆＃39;时删除了转换。应用了类 - 使通知框立即出现＆＃39; （尽管浏览器可以渲染它）并且只在隐藏时转换。我还将top属性移动到了.notify-box类，因此它在隐藏时不会移动，这看起来很奇怪。

Answer 6

解决方案在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高度设为继承，以便根据通知框高度更改其高度

fiddle link

防止隐藏div中的元素被点击＆＃39;

6 个答案: