jQuery slideUp显示元素而不隐藏

Question

jQuery的slideUp效果通过向上滑动来隐藏元素，而slideDown显示该元素。我想用slideUp显示我的div。任何人都可以引导我？感谢

Answer 1

$("div").click(function() { 
     $(this).hide("slide", { direction: "down" }, 1000); 
}); 

http://docs.jquery.com/UI/Effects/Slide

Answer 2

Jquery toggle

此切换效果仅适合上下。 jQuery UI的是每一个其他方向

Answer 3

我发现了一个取巧的办法...
你可以设置DIV与CSS样式底部：0像素， 添加通话
$("#div).slideDown();
将与效果基本show到显示效果展示你要。

Answer 4

获得与slideUp和slideDown相反的结果。将这两个函数添加到jQuery中。

$.fn.riseUp = function() { $(this).show("slide", { direction: "down" }, 1000); } 
$.fn.riseDown = function() { $(this).hide("slide", { direction: "down" }, 1000); } 

Answer 5

它比只说slideUpShow()什么的更复杂一点，但你仍然可以做到。这是一个非常简单的例子，所以你可能会发现一些需要处理的边缘情况。

$("#show-animate-up").on("click", function() { 
    var div = $("div:not(:visible)"); 

    var height = div.css({ 
     display: "block" 
    }).height(); 

    div.css({ 
     overflow: "hidden", 
     marginTop: height, 
     height: 0 
    }).animate({ 
     marginTop: 0, 
     height: height 
    }, 500, function() { 
     $(this).css({ 
      display: "", 
      overflow: "", 
      height: "", 
      marginTop: "" 
     }); 
    }); 
}); 

这里的显示使用animate的slideUp/slideDown方法，相同的效果小提琴，并使用animate修改后的版本是去反向：http://jsfiddle.net/sd7zsyhe/1/

由于animate是一个内置的jQuery的功能，您不需要包含jQuery UI。

Answer 6

我有一些downvotes所以我检查了我的答案，实际上我没有正确回答OP问题，对不起。所以我会试着解决这个问题。

首先，JQuery中的slideUp()方法旨在隐藏元素而不是透露它。它基本上与slideDown()相反，它通过滑动显示您的元素。

通过知道我认为我们同意没有幻术功能在那里做一个幻灯片上的效果来显示一个元素（在JQuery中）。

所以我们需要做一些工作来获得我们需要的东西：滑动显示效果。我找到了一些解决方案，并在这里是一个我认为很容易实现：

https://coderwall.com/p/9dsvia/jquery-slideup-to-reveal

解决方案上面的悬停事件的作品，为Click事件试试这个修改后的代码：

http://jsfiddle.net/D7uT9/250/

由@redbmk给出的答案也是一个可行的解决方案。

对不起，我第一次误会。

---

OLD ANSWER

这是一个古老的职位，但如果有人想办法解决这是我的建议：。

现在，我们可以使用slideToggle()来实现这种效果（不需要jQuery UI）。

$(".btn").click(function() { 
     $("div").slideToggle(); 
}); 

文档：http://api.jquery.com/slidetoggle/

Answer 7

对于那些谁鸵鸟政策使用jQuery UI的，但希望将函数添加到jQuery库：

jQuery.fn.slideUpShow = function (time,callback) { 
    if (!time) 
     time = 200; 
    var o = $(this[0]) // It's your element 

    if (o.is(':hidden')) 
    { 
     var height = o.css({ 
      display: "block" 
     }).height(); 

     o.css({ 
      overflow: "hidden", 
      marginTop: height, 
      height: 0 
     }).animate({ 
      marginTop: 0, 
      height: height 
     }, time, function() { 
      $(this).css({ 
       display: "", 
       overflow: "", 
       height: "", 
       marginTop: "" 
      }); 
      if (callback) 
       callback(); 
     }); 
    } 

    return this; // This is needed so others can keep chaining off of this 
}; 

jQuery.fn.slideDownHide = function (time,callback) { 
    if (!time) 
     time = 200; 
    var o = $(this[0]) // It's your element 
    if (o.is(':visible')) { 
     var height = o.height(); 

     o.css({ 
      overflow: "hidden", 
      marginTop: 0, 
      height: height 
     }).animate({ 
      marginTop: height, 
      height: 0 
     }, time, function() { 
      $(this).css({ 
       display: "none", 
       overflow: "", 
       height: "", 
       marginTop: "" 
      }); 
      if (callback) 
       callback(); 
     }); 
    } 

    return this; 
} 

现金@redbmk回答