16

解決策が見つかりませんが、ウェブ全体で読んでいるのと同じ問題があります。

簡単に言えば、私の DIV 要素で slideDown() メソッドを使用すると、jQuery が DIV サイズをスライドさせすぎて実際のサイズに戻るという醜いスナップ バック効果が得られます。

Web を見渡すと、iv は問題のある要素からすべてのマージンとパディングを削除しようとしましたが、何もしません。

ページの読み込み時にそれぞれが変更されるため、div の静的サイズを設定することはできません。それらは変更されませんが、1つがロードされました。(新しい div も ajax を使用して作成されます)

サンプル DIV を次に示します。

<div class="response hidden new">  
<div class="right"><span class="responseTime">10:28:10 AM</span></div>  
<span class="responseUser">Someone</span><br> 
<span class="responseMessage">sdgs sdgh</span>
</div>

そしてCSS

div.response {
line-height: 20px;
border-bottom: 1px dotted #546268;
}

.responseMessage {display: block}

誰でもここで私を助けることができますか? 私はアイデアがありません..まずjQueryを使用してDIVの高さを把握し、CSS()を使用して高さを強制してからslideDown()を呼び出してみましたが、jQueryはほとんど常に高さについて間違っていました...

応答 div も、display:none プロパティを使用して非表示にします。

次に、この関数が呼び出されます

function quickResponse(time, user, message, epoch) {
    $('.latestStar').remove();
    addResponse(time, user, message, epoch);
        $('.new').slideDown(500).removeClass('hidden');
    $('html, body').animate({ scrollTop: '0px'}, 1000, function() {
    });     
}

編集 言い忘れましたが、div に単語が 1 つしか含まれていない場合、スナップ バック効果は発生しません..しかし、複数の単語をスペースで入力すると発生します..

スペースを追加すると、高さが台無しになるようなものです。

4

8 に答える 8

18

修正をご覧ください:
1. SlideDown アニメーション ジャンプの再訪
2. jQuery の slideDown() ジャンプ効果の修正

また、jQuery の Web サイトに記載されている同じグリッチ (修正あり): http://docs.jquery.com/Tutorials:Getting_Around_The_Minimum_Height_Glitch

コードの前に次のコードを追加してみてください（ドキュメントのオンロード時）： 

$('.new').css('height', $('.new').height());
$('.new').hide();

このようにして、高さを明示的に設定し、div最初に表示するようにしてください。上記のコードは、正しい高さを hidden に設定できないと思うので、後で非表示にしdivますが、試すことはできます。グッドラック〜

于 2011-05-10T01:43:11.353 に答える
11

ULに追加していたLIアイテムで、スライドダウンのスナップバックの問題が発生していました。それについては何も派手なものがなかったので、私はそれが不可解であることに気づきました（そしてこれを以前に見たことがありましたが、私がそれをどのように修正したかを覚えていませんでした）。

私の場合、必要な修正はLIに幅を指定することだけで、slideDown（）とslideUp（）をスムーズに行うことができました。

例えば

ul li {幅：100％; }

@ arman-pによって投稿されたリンクの1つからこのヒントを入手しました（これは、要素に幅を追加することでこの問題を修正できることを示唆しています。私の場合はそうしました）。

于 2012-02-16T11:30:04.790 に答える
4

overflow: hidden下にスライドさせたい要素にcssを追加します。

何らかの理由で、これでスナップバックの問題が修正されました。

編集:要素の高さについてjqueryを混乱させるものは、スナップバックの問題を引き起こします。

  1. パディングが原因です。スライドさせたいパディングされたコンテンツをパディングなしで新しい親 div に配置し、代わりにその親 div を下にスライドさせます。
  2. 幅が原因で折り返されるインラインテキストが原因になります。追加するwhite-space: preか、それwhite-space: nowrapを解決します。
于 2014-06-23T13:45:18.173 に答える
3

私はまた、その醜いスナップバック効果を得ていました。

私にとってスナップバックの問題を修正したのは、スライド機能を適用しているdivにcss幅を適用することでした。

于 2013-02-20T22:21:50.853 に答える
0

すべて同じ幅に設定された画像をロードするデータベースがありますが、高さが異なるものもあり、これに問題がありました。私にとってそれを修正したのは、コードのslideDown部分にsetTimeoutを投げるだけでした。

setTimeout(function(){$("#YOURDIV").slideDown("slow");}, 1);
于 2014-11-18T23:54:27.623 に答える
0

上記の解決策はどれもうまくいきませんでした。次のスタイルをコンテナに追加して問題を修正しました。

.clear:after {
   clear: both;
}

.clear:before,
.clear:after {
   display: table;
   content: "";
}
于 2013-03-31T23:05:14.430 に答える
0

CSS を追加するclear: bothことで問題は解決しましたが、理由はわかりません。

編集：追加するoverflow: hiddenと、不要な高さが追加された空のコンテナが得られました。

于 2014-08-20T16:13:27.170 に答える