1

クラスを追加/削除するjQuery UIのアニメーションを使用して、ページ全体のさまざまな子要素の多くの変更をアニメーション化する親要素のクラスを切り替えようとしています。CSS の変更がクラスを追加している要素にも直接影響する場合、これを機能させることができますが、子要素の変更をアニメーション化するようには見えません。

たとえば、私の HTML が次のような場合:

<div class="parent">
  <span class="child">added to my parent</span>
</div>

CSS:

.red-parent .child { background-color: red; }

しようとすると$( ".parent" ).addClass("red-parent",2000)、アニメーションがオンになりません.child.2秒後に色が赤に変わります。

jsFiddle との比較はこちら。

どんな提案でも大歓迎です！

アップデート：

私はまだこれを理解することはできませんが、CSS3 のトランジションを使用して、互換性のあるブラウザーで効果を近似することができます:

.child {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

つまり、jQuery アニメーションについて心配する必要はありません。jQuery UI をまったく使用する必要はありません。addClass()などは自動的にアニメーション化されます。それでも、jQuery UI はこれを行うことができるべきではないでしょうか? CSSトランジションは、私が望むものには少しやり過ぎであり、同じ要素で実行したい他のアニメーションの邪魔になる可能性があります（たとえば、メニュー項目にカーソルを合わせます）。

4

3 に答える 3

1

jQuery UI 1.8.x は、指定された要素「.parent」から追加/削除されたクラスのプロパティのみをアニメーション化します。次に、アニメーションの最後に、被相続人がプロパティを「ポップ」します。子をアニメーション化する場合は、各子にクラスを追加し、子の CSS を更新します。

また、マウス イベントを「.click」に、メソッドを「.toggleClass」に置き換えました。

$(function() {
    $( "#button" ).click(
        function() {
            $( ".parent" ).children().toggleClass("red", 2000);
        });
});

jsFiddle の例: http://jsfiddle.net/bTcAV/1/

于 2012-11-01T20:08:39.607 に答える
-2

を使用する必要がありますjQuery UI 1.8.18。頭の中にインポートします。ここからダウンロードできますhttp://jqueryui.com/download それでいいはずです。

于 2012-08-05T23:51:05.727 に答える