1

slideToggle()テキストを含むDIVで単純なjQueryを実行しようとしていますが、slideDownアニメーションがスライドするDIVの下部に近づくにつれて、アニメーションが非常に遅くなる（ためらうようです）ことがわかりました。

このコードと例はここにあります。私はいくつかのコンピューターと人気のあるブラウザーのすべての最新バージョンでテストしましたが、すべて同じように動作します。不思議なことに、 jsFiddleでまったく同じページを実行すると、スムーズになります。

何か案は？

アップデート

これの一部は、他の誰かが示唆したように、アニメーションが実行される前にjQueryがスライドするDIVの高さを知らないようです。スライド式DIVのコンテンツは動的で、非常に短いかやや長いので、私もそうではありません。そこで、jQueryで非表示にする前にDIVの高さを取得し、それに応じてCSSの高さを設定してみました。ややスムーズなアニメーションのために作られましたが、おそらく最良の解決策ではありません-デモ

更新2

問題は、最初の例でのいくつかのCSSの問題が原因であるように見えます。まず、DIVが多すぎます。次に、スライディングDIVにはパディングセットがありました-とはうまく機能しません。最後に、スライディングDIVは（ボタン）DIVtoggleSlideも含むコンテナDIVにありました。#control-container

DIVを2つに減らし（スライディング要素の外側のDIVとスライディングDIV自体）、外側のスライディングDIVパディングを設定しないことでうまくいくようです-最後の例。

4

2 に答える 2

3

あからさまな Karmaw* * *g 念のため、私が正しい軌道に乗っている ;)

私は今、私の iPhone を使用しているので、私の仮定を検証することはできません - しかし、以前にpaddingおよび/またはmarginプロパティ およびheight:auto.

jQuery は、これらの状況下でアニメーション化する前に実際の高さを判断するのに苦労しているようです。

実際のコンテンツをコンテナー div にラップするか、高さを固定して、アニメーションがスムーズに実行されるかどうかを確認してください。

編集1：

私が使用したことを覚えている別の回避策：

  • CSS で要素を非表示にしない
  • domready で、jQuery を介して要素の高さを決定し、それを を介して要素に割り当てdata()、次に要素heightを0およびに設定します。overflow:hidden
  • の代わりに、以前に保存した高さslideToggle()で使用します。animate()

醜いが、うまくいく。

編集2：

関連する問題 (および回避策)については、こちらで説明しています

編集3：

ひょっとして、このフィドルはうまくいきますか? パディング付きのコンテナを追加しました - iPhone では jsfiddle は面白くないので、フォーマットが悪いのは許してください。

于 2012-03-21T23:25:08.940 に答える
-1

jQuery Easing プラグインが役立つ場合があります。

于 2012-03-21T23:20:21.617 に答える