Jquery消息框预留区域bug

Question

我正在使用这样的jQuery消息框。我想在我的web应用程序中使用它，但我仍然遇到一个问题。整个弹出框的这个区域应该保留。如果你看到这个链接，你发现它是在关闭的情况下弹出的，那么当你把光标移到底部时，它就变成了方便的光标。这显示了一个bug。

然而，我想做的就是做一个jQuery通知框(就像我们的堆栈溢出)，列出消息，当它关闭没有固定区域保留问题。

有谁知道一个好的插件吗?

有人能解决这个问题吗??

Answer 1

问题是消息框本身从来没有被隐藏，它只是有一个opacity值为0，因此不可见，但仍然发生。你需要做的是改变它的display属性值，就像StackOverflow在它的消息框上做的那样。

1。从.notifications中删除这两行:

transition: .2s;
opacity:0;

2。将这行添加到.notifications(如果您希望默认隐藏消息框):

display:none;

3。修改jQuery代码为:

$(document).ready(function () {
  $(".notificationicon").click(function () {
   
    $("#notificationMenu").fadeToggle(200);
    
  });
});

codePen演示。

定制

如果您想自定义缓动，您可以将fadeToggle(200);更改为fadeToggle(200, 'EASING-TYPE');，其中EASING-TYPE是一个字符串值，指示用于过渡的函数(默认是swing，但也可以是linear)。