jquery - 使用 jQuery 淡化 css 样式悬停状态的动画

Question

是否可以在悬停时使用 jQuery 使一种样式的所有 css 属性淡出动画？我的意思是，如果您仅使用 css 定义了样式及其 :hover 状态，则脚本将完成剩下的工作。示例:

.button1 {
background: url(img1.jpg) repeat-x top left;
color: #000;
}
.button1:hover {
background: url(img2.jpg) repeat-x top left;
color: #F00;
}

如果您希望 jQuery 脚本对许多相似的按钮执行相同的操作，这可能吗？还是只能定义两种不同的 css 样式？

Answer 1

您可以用一个类替换悬停 css 并使用 jquery UI ToggleClass动画:

CSS:

.button1:hover,
.button1_hover_class {
  background: url(img2.jpg) repeat-x top left;
  color: #F00;
}

javascript:

$(".button1").hover(function() {
    $(this).toggleClass("button1_hover_class", 1000);
    return false;
});

如果你想同时使用 css 悬停和 javascript 悬停，我想你将不得不取消 javascript hover 函数中的默认操作。

编辑:为了回答您的其他问题，上面的 javascript 将应用于具有 .button1 类的所有按钮，但如果您想将其添加到 .button2 同样，你可以使用例如:

$(".button1, .button2").hover(function() {