2

この例では、私のdivコンテナは非表示にして表示するだけですが、すばらしいjQueryアニメーションは実行しません。

$('.button').click(function() {
    $('.class1').slideToggle();
});

誰かが私に理由を言うことができますか？テーブルのアニメーションが正しく機能しないことは知っていますが、divでは問題ないはずです。

更新すべての答えをありがとう。私が見逃していた情報は、絶対位置がDOMから要素を削除するということです。そして、ええ、私はスタイルをcssに入れるべきだと知っています-このバージョンはただの迅速なテストのためでした、しかし答えに感謝します!!!

4

4 に答える 4

7

.slideToggle（）は、要素の高さを0％から100％までアニメートし、子を非表示にします。

フィドル全体でposition：absoluteを使用することにより、DOMのフローから子要素を削除し、親要素が子を段階的に非表示にする機能を妨害します。

オーバーフローをhiddenに設定し、position：absoluteを子から削除すると、これは正しく機能します。

http://jsfiddle.net/7xzMa/6/

于 2012-08-06T22:36:44.853 に答える
1

フィドルを更新しました-http : //jsfiddle.net/7xzMa/14/---divをクリーンアップしました。編集しやすいように、cssをスタイルシートに配置する必要があります。「display」は「none」に設定する必要があります。表示したい場合を除いて、クリックして非表示にします。http://jsfiddle.net/7xzMa/8/

于 2012-08-06T22:41:19.913 に答える
1

Artur、私の推奨事項は、コードを完全に再構築することです。あまりにも多くのことが起こっています。短くてシンプルなものが常に最適です。私はあなたのhtmlの「スタイル」属性を取り除くことから始めます。必ずCSSにスタイルを配置してください（複数のタグからスタイルを削除するよりも、よりクリーンで保守が簡単です）。

デモを作成しました。お役に立てば幸いです。お気軽にご利用ください！ハッピーコーディング！http://jsfiddle.net/7xzMa/17/

于 2012-08-06T23:22:07.320 に答える
0

JQueryUIを使用する

$(document).ready(function() {
    $('.button').click(function() {
        $('.class1').toggle('slide',{direction: 'up'},500);
    });
});
于 2015-02-15T22:52:19.550 に答える