Question

可以这样做吗？

例如。

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

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

当鼠标悬停在元素上时，我可以淡化所有具有class1到class2的元素，当鼠标离开时，可以淡化到class1吗？

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');
    });
});

Answer 2

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

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

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

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

Answer 3

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

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

Answer 4

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

Answer 5

这是我的实施：

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

Answer 6

通过为Jquery hover（）提供handlerIn和handlerOut函数，其功能为documented here，您可以轻松地处理mouse in和mouse out事件。接下来，看看Jquery UI switchClass()，以一种干净的方式轻松地在两个类之间切换。最后，添加fadeIn（）使所有这些工作都变得清晰。

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

Working CodePen

Answer 7

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

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

jQuery在悬停时将元素从一个类淡化为另一个类

7 个答案: