jQuery在鼠标悬停时将元素从一个类淡出到另一个类

Question

这可以做到吗？

例如：

.class1{
  background-image:(whatever.jpg)
  color: #fff;
}

.class2{
  background-image:(whatever2.jpg)
  color: #999;
}

当鼠标悬停在具有class1的元素上时，我能否使所有class1元素变成class2元素，当鼠标移开时，又将class2元素还原为class1元素?

- Alex

Answer 1

如果您不想使用插件，可以按照以下步骤进行：

$(".class1").hover(
function () {
    $(this).fadeOut(function () {
        $(this).removeClass("class1").addClass("class2").fadeIn('fast');
    });
},
function () {
    $(this).fadeOut(function () {
        $(this).removeClass("class2").addClass("class1").fadeIn('fast');
    });
});

- Sang Suantak

Answer 2

可以查看jQuery UI对addClass的扩展。它允许使用持续时间参数来实现动画效果。

在这里，我认为你想做的事情类似于这样：

$('.class1').hover(function(){
    $(this).addClass('class2', 800);
}, function(){
    $(this).removeClass('class2', 800);
});

显然，您需要安装jQuery UI才能实现此功能。

- lonesomeday

---

它能使背景图片动画化吗？在jQuery UI中，只列出了一些CSS属性用于动画。 - Alex

Answer 3

我认为这个插件是您正在寻找的。它允许您在类之间进行动画处理。例如：

$('.class1').animateToClass('.class2', 1000);

- Olical

---

+1 我也是这样理解问题的。请注意，如果要进行颜色动画，您需要使用jQuery UI或类似http://plugins.jquery.com/project/color的插件。 - sunn0

@Alexandra，所以你下载了我提供的插件。将其包含在你引入jQuery的代码下面，然后结合像@lonesomeday发布的代码示例使用？因为它应该可以正常工作，除非你正在使用jQuery 1.5，这可能与此插件不兼容。 - Olical

Answer 4

如果你给它们相同的绝对位置，使用fadeIn()和fadeOut()会产生这种效果（附加在onmouseover和onmouseout上）。

- drewblaisdell

Answer 5

这是我的实现：

      $(this).fadeOut("fast"); or $(this).hide();
      $(this).removeClass('css1').addClass('css2');
 $(this).fadeIn("slow");

- Victor

Answer 6

通过在Jquery hover()中提供handlerIn和handlerOut函数，如此处所述，您可以轻松处理鼠标进入和离开事件。接下来，请查看Jquery UI switchClass()以一种干净的方式轻松切换两个类。最后，添加fadeIn()使所有这些成为一个干净的过渡。

$("div.class1").hover(
 function(){$("div").switchClass("class1", "class2").fadeIn(800);},
 function(){$("div").switchClass("class2", "class1").fadeIn(800);}
);

工作的 CodePen

- Katrpilar

Answer 7

我认为这可能对你有所帮助...

$('.class1').mouseover(function() {
    $(this).toggleClass('class2');
 });

- Vivek

---

使用jQuery的toggleClass方法可以在元素上开关一个类。它与两个类之间的切换无关。 - Glen Selle