jQuery .slideUp（）无效

Question

我遇到了一个我似乎无法理解的问题。

这是我的jQuery代码：

var doc = document;
var win = window;
$(doc).ready(function(){
        $('.t').click(function(){
            $('#Notify').slideUp(600);          
        });
});

代码要长得多，但我把它缩短了，只是问题所在。

这是#Notify

的CSS

#Notify {
    display: none;
    bottom: 0;
    right: 0;
    position: fixed;
    background: rgba(0,0,0,0.6);
    height: 100px;
    width: 100%;
}

奇怪的是，这似乎并没有让所有事情发生在一起，但当我删除display: none;并点击.t时，它会向下滑动并消失。

Answer 1

slideUp无效，因为您的元素已被隐藏。将其更改为slideDown，您会看到它出现;相反，将CSS设置为visible，您将看到它消失。

这是一个jsFiddle来玩。

Answer 2

试试这个：

var doc = $(document);
var win = $(window);
$(function(){
        $('.t').click(function(){
            $('#Notify').slideUp(600, function(){
               $(this).show();
            });          
        });
});

Answer 3

jQuery slideUp documentation

根据您的编辑，看起来好像您在隐藏后尝试显示该项目。 slideUp用于获取项目以执行向上滑动的动画，例如窗帘，然后最终隐藏，而不是显示。

也许您正在寻找slideDown？

Answer 4

可能是您可以使用.slideDown()：

执行此操作

$(doc).ready(function () {
   $('.t').click(function () {
      $('#Notify').slideDown(600);
   });
});

var doc = document;
var win = window;

Fiddle for .slideDown()

或者您也可以尝试使用.slideToggle()。

Fiddle for .slideToggle()