1 
$(document).ready(function() {
    $('.button').hover(function() {
        $(this).toggleClass('button-hover',200);
    },function() {
        $(this).toggleClass('button-hover',200);
    });
});
$(document).ready(function() {
    $('.button-rounded').hover(function() {
        $(this).toggleClass('button-rounded-hover',200);
    },function() {
        $(this).toggleClass('button-rounded-hover',200);
    });
});

<div class="button">Add class `button-hover` to this `div` on mouse over.</div>
<div class="button button-rounded">Add class `button-hover` and 
    class `button-rounded-hover` to this `div` on mouse over.</div>

2番目divのアニメーション全体を実行するには、400ミリ秒かかります。トグルの場合は200ミリ秒button-hover、次にトグルの場合はさらに200ミリ秒かかりbutton-rounded-hoverます。これらのトグルを同時に実行するにはどうすればよいですか？

ノート：

  • 私はOOCSSを使用しているので、button-roundedextends button、button-rounded-hoverextends button-hover。button-rounded-hoverあまり正確に定義したくないbutton-hoverのは、DRY（Do n't Repeat Yourself）ではないため、2番目のクラスで2つのクラスと2つのホバー呼び出しを使用している理由ですdiv。
  • 両方のアクションに200ミリ秒かかる必要があります。どちらも0（瞬時）にしたくありません。
4

2 に答える 2

1

クラスを持つすべての要素に.button-roundedクラスもある場合.button（これは「ボタンで囲まれた拡張ボタン」で理解できます）、ボタンにホバーハンドルを追加するだけで、要素にボタンがあるかどうかに基づいて切り替えるクラスを選択する必要があります-丸められたクラス。例：

$(document).ready(function() {
    $('.button').hover(function() {
        $(this).toggleClass(
            ($(this).hasClass('button-rounded') ? 'button-rounded-hover ' : '') +
            'button-hover',
            200
        );
    });
});

また、 toggleClassは、スペースで区切られたクラスのリストに対応しているため、複数のクラスを同時に切り替えることができます。

注：「over」関数と「out」関数はどちらも等しいため、1つの関数を使用でき、両方のイベントに適用されます。

于 2012-02-19T04:43:57.413 に答える
0

これはそれを行う必要があります：

javascript：

$(document).ready(function() {
    $('.button').hover(function() {
        $(this).toggleClass('button-hover',200);
    });
    $('.button-rounded').hover(function() {
        $(this).toggleClass('button-hover button-rounded-hover',200);
    });
});

HTML：

<div class="button">Add class `button-hover` to this `div` on mouse over.</div>
<div class="button-rounded">Add class `button-hover` and class `button-rounded-hover` to this `div` on mouse over.</div>

2番目のdivからクラスが削除されていることに注意してくださいbutton。これには、2つのクラスのCSSの再定義が必要になる場合があります。

于 2012-02-19T05:19:10.700 に答える