jQuery slide要素を表示して非表示にしないでください

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

このトグル効果は上下のみのためです。 0PX、 追加コール
$("#div).slideDown();
はslideUp・ツー・ショー効果で表示されます：jQueryのUIは、他のすべての方向

Answer 3

のためである私は、CSSスタイルの下でのdivを設定することができます...
をトリッキーな方法を見つけましたあなたは欲しい。

Answer 4

slideUpとslideDownの反対を取得します。これら2つの関数を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: "" 
     }); 
    }); 
}); 

ここslideUp/slideDown方法、animateを使用して、同じ効果、逆に行くanimateを使用して修正したバージョンを示すフィドルです：animateは内蔵のjQueryの関数であるので、あなたが、http://jsfiddle.net/sd7zsyhe/1/

をjQuery UIを含める必要はありません。

Answer 6

私は自分の答えをチェックしたので、本当に私はOPの質問に正しく答えなかった。だから私はそれを修正しようとしています。

まず、JQueryのslideUp()メソッドは、要素を表示せずに非表示にすることを目的としています。これは基本的にslideDown()の逆で、エレメントをスライドさせて表示します。

私は、（JQueryの）要素を表示するためのスライドアップエフェクトを行うための魔法の機能がないことに同意していると思っていることを知っています。

私たちが必要とするものを得るためには、少しだけ作業を行う必要があります。私はいくつかの解決策を発見し、ここで私は実装が簡単だと思うものです：

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

：

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

ソリューションは、上記のクリックイベントのために、ホバーイベントと連携し、この変更されたコードを試してみてください

@redbmkで示される回答もまた有効な解決策です。

ご迷惑をおかけして申し訳ありません。

---

OLD ANSWER

それは古い記事ですが、誰かが解決策を探しているなら、ここに私recommandationです。

この効果を得るには、slideToggle()を使用することができます（jQuery UIは不要です）。

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

ドキュメント：jQueryのUIを使用ドントが、jQueryのライブラリに機能を追加したい人のためにhttp://api.jquery.com/slidetoggle/

Answer 7

：

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