悬停时，jQuery将元素从一个类淡化到另一个类答案

【问题标题】：jQuery fade elements from one class to another, on hover悬停时，jQuery将元素从一个类淡化到另一个类
【发布时间】：2011-06-22 15:27:44
【问题描述】：

这个可以吗？

例如。

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

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

当鼠标悬停在元素上时，是否可以将所有具有 class1 的元素淡化为 class2，并在鼠标离开时淡化回 class1？

【问题讨论】：

标签： jquery css effects fadein jquery-effects

【解决方案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');
    });
});

【讨论】：

【解决方案2】：

看看jQuery UI's extension to addClass。它允许一个持续时间参数给出动画的可能性。

在这里，我想你想做这样的事情：

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

显然你需要为此安装 jQuery UI。

【讨论】：

它可以为背景图像设置动画吗？在 jquery UI 上，动画中只列出了几个 css 属性

【解决方案3】：

我认为this plugin 是您正在寻找的。它允许您在类之间制作动画。例如：

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

【讨论】：

+1 这也是我理解问题的方式。请注意，对于彩色动画，您需要 jQuery UI 或 plugins.jquery.com/project/color 之类的插件
@Alexandra 所以你下载了我链接的插件。将它包含在您包含 jQuery 的下方，然后将我作为示例展示的代码与 @lonesomeday 发布的内容结合使用？因为它应该可以正常工作，除非您使用的 jQuery 1.5 可能与此插件一起工作，也可能不工作。

【解决方案4】：

如果你给两个相同的绝对位置，使用fadeIn() 和fadeOut() 会产生这个效果（附加到onmouseover 和onmouseout）。

【讨论】：

【解决方案5】：

这是我的实现：

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

【讨论】：

【解决方案6】：

通过为Jquery hover() 提供handlerIn 和handlerOut 函数作为documented here，您可以轻松地处理鼠标移入和移出事件。接下来，看看Jquery UI switchClass()，以一种干净的方式轻松地在两个类之间切换。最后，添加 fadeIn() 使所有这一切成为一个干净的过渡。

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

Working CodePen

【讨论】：

【解决方案7】：

我想这可能对你有帮助....

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

【讨论】：

使用 jQuery 的 toggleClass 方法可以打开和关闭一个元素的一个类。它与两个类和它们之间的切换无关。