12

私のjQueryスキルは通常はかなり良いですが、これは私を怒らせています！

これは、私が最初からコーディングした非常に単純なアコーディオンです。jQuery 1.3.2を使用しているので、ジャンプするバグはないはずですが、基本的に例を見ると次のようになります。

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

右側にターゲットdivの高さを表示しています。テキストが含まれている場合は、実際よりも短いと見なされてジャンプします。画像であれば問題ありません。

どこが間違っているのかわかりません-明らかにCSSのどこかにありますが、display：blockのような通常の容疑者をすべて試しました

どんなアイデアでもありがたいです！

あなたの、クリス

PSソースコードの性質をご容赦ください。私が取り組んでいるプロジェクト全体を取り除いたので、実際にそこにある必要のないいくつかのdivが含まれています。

4

10 に答える 10

18

私は今、私自身の動的な解決策を見つけたことを認めなければなりません。

http://www.mizudesign.com/jquery/accordian/basic.htmlを修正する必要があります。

div を非表示にする前に、.css を使用して高さを追加するだけです。御馳走になります:)

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

$("#PlayerButtonsContent div").hide();
于 2009-07-07T15:06:24.047 に答える
16

スムーズにアニメーション化するには、コンテンツの幅または高さが必要です。

于 2009-07-07T13:41:49.847 に答える
3

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

また、テーブルは、slideDown slideUp ではバグのある動作をするので、fadeIn、fadeOut を使用することに注意してください

于 2009-07-07T14:49:00.627 に答える
1

div がコールバックからアニメーションを終了したら、高さを取得します。div がアニメーション化されている間に高さを取得していて、遷移値を取得している可能性があります。

アニメーションがびくびくする場合は、コールバックを使用してみてください。div を開くと同時に div を非表示にしないでください。代わりに、最初の div を非表示にして、コールバック内で次の div を表示します。

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

更新（コメントから）：

レッドスクエア: http://jqueryfordesigners.com/slidedown-animation-jump-revisited/

于 2009-07-07T13:08:46.807 に答える
1

私の問題は、レスポンシブ デザインを使用しているため、要素の幅や高さがどうなるかわからないことです。このブログ投稿http://www.bennadel.com/blog/2263-Use-jQuery-s-SlideDown-With-Fixed-Width-Elements-To-Prevent-Jumping.htmを読んだ後、jQuery が位置を変更していることに気付きました。私の要素を修正して、要素のレイアウトをいじります。要素の CSS に以下を追加しましたが、IE7+、firefox、chrome、および safari で悪い副作用に気付きませんでした。

display: none;  
overflow: hidden;
position: relative !important;
于 2013-08-02T18:21:14.107 に答える
1

また、Safari で発生した迷惑なslideUp()ジャンプの問題もありましたが、chrome や IE では発生しませんでした。非表示/表示していた div タグが、div を含む別の div タグのすぐ下にあることが判明しましたfloat:left。スライドアップ中に、フローティング div が一時的に再レン​​ダリングされ、ジャンプが発生しました。

修正は、非clear:both表示/表示 div のスタイルに追加するだけでした。

于 2012-08-24T18:36:40.730 に答える
0

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

  .slide-div:before{
    content: " ";
    display: block;
    margin-top: 15px;
  }
于 2014-12-28T10:07:02.017 に答える
0

この問題は、「height:0px」をレンダリングしようとする IE (互換モード) が原因です。

修正: 高さを 1 (0 ではない) にアニメーション化してから、非表示にして高さをリセットします。

// slideUp for all browsers
$("div").animate({ height:1 },{ complete:function(){
        // hide last pixel and reset height
        $(this).hide().css({ height:"" });
    } 
});
于 2013-08-22T13:47:48.213 に答える
0

これは私のために働いた：

$(this).pathtoslidingelementhere.width($(this).parent().width());
于 2011-05-25T12:54:18.157 に答える