Question

$(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毫秒：button-hover切换需要200毫秒，button-rounded-hover切换需要另外200秒。 如何同时执行这些切换？

注意：

我正在使用OOCSS，因此button-rounded扩展button，button-rounded-hover扩展button-hover。我不想将button-rounded-hover定义为几乎与button-hover完全相同，因为那不会非常干（不要重复自己），这就是为什么我在使用两个类和两个悬停调用第二个div。
这两项行动都需要200ms。我不想让他们中的任何一个0（瞬间）。

Answer 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”函数都是等号，因此您可以使用单个函数，它将适用于这两个事件。

Answer 2

这应该这样做：

的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。

jQuery - 对多个CSS类同时进行悬停操作

2 个答案: