1

ここでは次のコードを使用しています。

function toggle_visibility(id, h4id)
{
    var e = $("#" + id);
    var h = $("#" + h4id);
    h.css({'padding': '0 0 0 20px'});
    e.animate({height: 'toggle'}, 400, function(){
        var vImg = e.is(':visible') ? 'minus' : 'plus';
        h.css({'background-image': 'url(/images/' + vImg + '.png)'});
    });
}

こちらのページをご覧ください : http://opportunityfinance.net/industry/

こちらのページをご覧ください: http://opportunityfinance.net/consulting/default.aspx?id=6474 本当にびくびくしたアニメーションです。クリックすると下にスライドし、クリックすると上にスライドします。

これを引き起こしている可能性のある 2 つのページの違いを特定しようとしていますが、2 ページ目のジャンプがないと上下にスライドしない理由がわかりません。

どうすればこれを修正できますか? ここSOですでにいくつかの質問と回答を読んでいますが、運が悪いです。

ありがとうございます。これについてさらに情報が必要な場合はお知らせください。

4

5 に答える 5

0

animate() の代わりに jQuery SlideUp() および SlideDown() を使用します。それが動作します ...

于 2013-03-24T15:48:02.727 に答える
0

アンガスが言ったように、あなたの問題は、非表示の要素の高さが毎回変わることですが、アニメーション化する時間はありません (400ms) .それはとても簡単です. あなたの問題は、異なる高さで同じ時間を持っていることです。そのため、高さに対する比率で時間を変更してみてください.

于 2013-03-24T15:30:27.823 に答える
0

問題は、開いたり閉じたりしてアニメートしている div 内のコンテンツの複雑さです。最初の例では、プレーン テキストの小さな段落があります。2 番目の例では、動画が埋め込まれています。

CSS3 ベースのアニメーションを使用すると、複雑なコンテンツのパフォーマンスが向上するかどうかを調べることができます。

于 2013-03-24T15:02:50.270 に答える
0

私の知る限りでは、コンテンツの高さに関係しています。つまり、1 ページ目のトグル コンテンツはかなり短いため、400 のアニメーション速度で十分に高さいっぱいまでスムーズにアニメーション化できますが、2 ページ目では速度が速くなります。展開ははるかに高速です+外側のコンテンツラッパーよりも背が高いため、外側のラッパーがそれを収容するために展開するときにジャンプが発生します。

私が考えることができる最善の解決策は、アニメーションの速度を遅くすることです!

于 2013-03-24T15:03:22.783 に答える
0

わかりました、問題は<h4>タグがあり、margin-bottomにmargin-top設定されていることが原因でした1em。上書きする要素のクラスでmargin-top5px の margin-top を設定していたので、これは実際には問題ではありませんでしたが、それでも問題が発生しました。toggle2<h4>

これを修正するために、 と の両方margin-topをmargin-bottomに設定し、タグ内で0pxそれぞれをラップして、そのタグを に設定しました。<h4>Title</h4><div>contents</div>divdivmargin-bottom1em

これで問題は解決したようです！ありがとうございます。マージンやパディングが問題の原因であると感じましたが、私は正しかったです!

于 2013-03-24T16:52:39.540 に答える