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>

第二个div，整个动画需要 400 毫秒：切换需要 200 毫秒button-hover，然后切换需要 200 毫秒button-rounded-hover。如何同时执行这些切换？

笔记：

  • 我正在使用 OOCSS，所以button-roundedextendsbutton和button-rounded-hoverextends button-hover。我不想定义button-rounded-hover几乎完全一样button-hover，因为那不会很干燥（不要重复自己）所以这就是为什么我使用两个类和第二个悬停调用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" 函数是相等的，您可以使用单个函数，它将适用于两个事件。

于 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>

注意从第二个 div 中删除类button，这可能需要重新定义两个类的 CSS。

于 2012-02-19T05:19:10.700 回答