6

jQuery アニメーションのしくみを理解しようとしています。

たとえばa、クリック可能な画像のように見える CSS を持つ要素と、CSS で指定withされた and がある場合、この要素のandheightを安全にアニメーション化するにはどうすればよいでしょうか?widthheight

CSS クラスの値をアニメーション化する必要はありますか? widthまたは、とのターゲット値を使用して新しい CSS クラスを設定し、heightjQuery に からoldClassまでアニメーション化させる必要がありnewClassますか?

または、CSS で指定されている値に関係なく、jQuery のメソッド.width()とメソッドを単純に使用できますか?.height()

私を混乱させているのは、要素の幅をjQueryで微調整した場合、これもCSSを変更するのか、それともjQuery / JavaScriptは単にCSSで指定された値を別のもので上書きするのか? つまり、jQuery を使用して幅を編集した後、この幅は CSS ファイルでも新しい値になりますか? このクラスを他の要素に適用すると、新しい幅になりますか?

4

3 に答える 3

5

インライン スタイルをオーバーライドします。

上と左がアニメーション化されたバージョンを表示しますが、ほとんどすべての CSS プロパティに適用できます。

HTML

<span id="test">blablabla</span>

CSS

span{
    position:absolute;
    display:block;
    height:50px;
    width:50px;
}

jquery

$('#test').animate({top:'100px',left:'50px'}, 500);

これは、「要素を調べる」ときに表示されるものです

フィドル

于 2013-06-17T12:56:39.710 に答える
5

久しぶりですが、とにかく答えを探している人に役立つかもしれません。CSS3 遷移プロパティに依存すると、古いブラウザーをサポートしたい場合に問題が発生する可能性があります。

2 つの状態 (CSS クラス) の間でアニメーション化するという要求された動作は、switchClass() メソッドを拡張することでこれをサポートするjQuery UIを使用して完全に実現できます。また、期間、イージング、コールバックなど、animate() メソッドのすべての機能もサポートしています。

公式ドキュメントに記載されているように: '

ネイティブの CSS トランジションと同様に、jQuery UI のクラス アニメーションは、ある状態から別の状態へのスムーズなトランジションを提供すると同時に、どのスタイルを変更するかに関するすべての詳細を CSS で保持し、JavaScript から除外することを可能にします。

ここですべてを読むことができます。

jQuery UI は、必要なものだけを含めるようにコンパイルすることもできるため、使用しない機能を除外することでライブラリのサイズを小さくすることができます。ここで利用可能なオプションを確認してください。

それが誰かを助けたことを願っています！

于 2014-07-28T18:36:57.960 に答える
3

jQuery animate は数値の css 値のみをアニメーション化します。クラス間でアニメーション化されません (その方法については、以下の例を参照してください)。.animate() 関数は、指定した css をパラメーターとして追加し、インライン css として追加します。スタイルシート css を常にオーバーライドします。これは問題ありませんが、少し厄介で、非常に簡単に制御不能になる可能性があります。

ただし、クラス間でアニメーションを付けたい場合はcss3のtransitionプロパティを使った方がパフォーマンス的にもきれいです。例を参照してください:

HTML

<div class="myTestAnimation">Something to test</div>

JQuery (これにもバニラ JavaScript を使用できます)。クラス間を切り替えるだけです。この方法では、css にスタイリング情報がまったくありません。

    jQuery(document).ready(function($) {
    $(".myTestAnimation").click(function() {
        $(this).toggleClass("animate");
    });
});

CSS (これは幅と高さ、および背景色をアニメーション化します) .animate() は背景色をアニメーション化しないため、追加のボーナスです。

.myTestAnimation {
    width: 50px;
    height: 50px;
    background-color: red;
    -webkit-transition: background-color 300ms linear, width 300ms linear, height 300ms linear;
     transition: background-color 300ms linear, width 300ms linear, height 300ms linear;
    position: relative;
}
.myTestAnimation.animate {
    background-color: blue;
    width: 200px;
    height: 200px;
}
于 2013-06-18T16:43:44.437 に答える