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回答