jquery - 高さを修正した jQuery UI スライド アニメーションは初回のみ動作します

Question

ajax で結果を読み込む検索機能があり、スライド アニメーションを使用して結果を表示します。よく働く！しかし、残念ながら最初の 1 回だけで、2 回目以降はスライド ダウン アニメーションが機能しません。

こちらをご覧ください: http://jsfiddle.net/e4sQh/4/

検索はそこで実行されず、ajax データは読み込まれませんが、要点はわかります。ご協力いただきありがとうございます！

Answer 1

この部分は間違っていると思います

if( !height ){
    // get original height
    height = $el.show().height();
    // update the height
    $el.data("originalHeight", height);
    // if the element was hidden, hide it again
    if( !visible ) $el.hide().css({height: 0});
  }

要素を表示して高さを取得するため、表示されているとおりにスライドしません。

css()メソッドを使用してposition:absolute、、visibility:hiddenおよびを設定する必要がありdisplay:blockます。

とにかくJQueryはあなたの関数を置き換えるメソッドを提供します、スライドを見てください

Answer 2

交換

slideToggle('#results',true); // inside hideLoading()

と

content.slideDown();

Answer 3

これは、高さの設定がチェック0内にあるためです (これは最初にのみ当てはまります)。if

  // get the original height
  if( !height ){
    // get original height
    height = $el.show().height();
    // update the height
    $el.data("originalHeight", height);
    // if the element was hidden, hide it again
    if( !visible ) $el.hide().css({height: 0});
  }

次のように外側に移動する必要があります。

  // get the original height
  if( !height ){
    // get original height
    height = $el.show().height();
    // update the height
    $el.data("originalHeight", height);
  }
  // if the element was hidden, hide it again
  if( !visible ) $el.hide().css({height: 0});

このようにして、毎回適切に非表示にします。ここでテストできます。