基本的なjQueryのslideUpとslideDownは私が怒っ運転します！

Question

私のjQueryのスキルは、通常はかなり良いですが、これは私を駆動しています 狂った！

これは、私が最初からアップコード化されてきた非常に単純なアコーディオンです。使い方 jQueryの1.3.2これが任意のジャンプバグもなく、基本的にもしてはなりません あなたは例を見てみます：

http://www.mizudesign.com/jquery/accordian/basic.html

私は、右のターゲットのdivのための高さを表示しています - それならば それはそれがあるとジャンプよりも短いだと思ったテキストが含まれています。 それは、画像なら何も問題はありません。

私は私が間違っているつもりだところを見つけ出すことはできません - それはCSSで明らかです どこかに私は、ディスプレイなどのすべての通常の容疑者を試してみた：ブロック

すべてのアイデアは感謝して受信されるだろう！

Yoursを、 クリス

PSソースコードの性質を許してください、私はそれをリッピングしました 私が働いているプロジェクト全体ので、それはいくつかのdivを含まないこと 本当にそこにする必要はありません。

Answer 1

あなたはそれがスムーズにアニメーション化するために、コンテンツの幅または高さを必要とします。

Answer 2

私は今、自分のダイナミックな解決策を見つけた認める必要があります。

http://www.mizudesign.com/jquery/accordian/basic.html 固定されなければならない。

これは実際に非常に簡単です - ちょうどdiv要素を非表示にする前の.cssを使用して高さを追加します。 御馳走を作品：）

$("#PlayerButtonsContent div").each (function() {
$(this).css("height", $(this).height());
});

$("#PlayerButtonsContent div").hide();

Answer 3

私はこの問題は、パディングやマージンが、それがジャンプし、その後追加されたときに、これは私がそうであったこと、だと思います。あなたは、コールバックに余裕をアニメーション化する必要があります。

また、テーブルはslideDown slideUpとバギーを振る舞うと、むしろフェードインフェードアウト

を使用していること「を覚えておいてください」

Answer 4

div要素は、コールバックからそのアニメーションを終えた後、

の高さを取得します。これは、div要素がアニメ化されている間に高さを取得している、とあなたは移行値を取得している可能性があります。

あなたのアニメーションがビクビクある場合は、

、コールバックを使用してみてください。 DIVを開くと同時に、div要素を非表示にしないでください。代わりに、あなたの最初のdivを隠し、およびコールバックの中にあなたの次のdivを表示します。

$(".someDiv").slideUp("normal", function(){
  /* This animation won't start until the first
     has finished */
  $(".someOtherDiv").slideDown();
});

（コメントより）更新：

  

redsquare： http://jqueryfordesigners.com/slidedown-animation-jump-revisited/ の

Answer 5

私も、クロムまたはIEのSafari上で発生した迷惑slideUp()ジャンプの問題を持っていましたが、ありません。それは私が隠れていたdivタグが/上映が右float:leftのdivが含まれて別のdivタグを下回っていたことが判明しました。アップ摺動時、フローティングdiv要素は、瞬間的にジャンプを引き起こす再レンダリングされることになります。

修正は単に表示/非表示のdivのスタイルにclear:bothを追加されました。

Answer 6

私の問題は、私はを応答デザインを持っているので、を、私は私の要素の幅や高さがあることを行っているのか分からないということです。このブログの記事<のhref =「http://www.bennadel.com/blog/2263-Use-jQuery-s-SlideDown-With-Fixed-Width-Elements-To-Prevent-Jumping.htm」のrel =を読んだ後"nofollowを"> http://www.bennadel.com/blog/2263-Use-jQuery-s-SlideDown-With-Fixed-Width-Elements-To-Prevent-Jumping.htm に私はjQueryのに気づきました固定に私の要素の位置を変更し、要素のレイアウトをいじり。私は、要素のための私のCSSに以下を追加し、IE7 +、Firefoxの、クロム、およびSafariで任意の悪い副作用に気付かなかった。

display: none;  
overflow: hidden;
position: relative !important;   

Answer 7

パディングトップとパディング・ボトム値とのマージントップ及びマージンの下の値を交換する私のためのトリックを行いました。この後に0にマージン値を設定することを忘れないでください。

Answer 8

これは私のために働いてます：

$(this).pathtoslidingelementhere.width($(this).parent().width());

Answer 9

問題は、 "高さ：0PX" をレンダリングしようとしているIE（Quirksモード）によるものである。

[FIX

：高さを隠し、リセット次いで、1（0でない）までの高さをアニメート

// slideUp for all browsers
$("div").animate({ height:1 },{ complete:function(){
        // hide last pixel and reset height
        $(this).hide().css({ height:"" });
    } 
});

Answer 10

私にとっては、問題がスライドして表示/非表示するにはDIVの上マージン（またはパディング）でしたが、私はそれのdivにマージン（またはパディング）を与える必要がありました。私はこのトリックを解決します：

  .slide-div:before{
    content: " ";
    display: block;
    margin-top: 15px;
  }