8

可以这样做吗？

例如。

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

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

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

4

7 回答 7

17

如果您不想使用插件，可以执行以下操作：

$(".class1").hover(
function () {
    $(this).fadeOut(function () {
        $(this).removeClass("class1").addClass("class2").fadeIn('fast');
    });
},
function () {
    $(this).fadeOut(function () {
        $(this).removeClass("class2").addClass("class1").fadeIn('fast');
    });
});
于 2011-02-07T10:20:14.560 回答
15

看看jQuery UI 对addClass. 它允许持续时间参数给出动画的可能性。

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

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

显然，您需要为此安装 jQuery UI。

于 2011-02-07T10:14:10.663 回答
4

我认为这个插件就是你要找的。它允许您在类之间制作动画。例如：

$('.class1').animateToClass('.class2', 1000);
于 2011-02-07T10:11:17.997 回答
2

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

于 2011-02-07T10:11:35.783 回答
1

这是我的实现：

      $(this).fadeOut("fast"); or $(this).hide();
      $(this).removeClass('css1').addClass('css2');
 $(this).fadeIn("slow");
于 2012-03-02T16:04:25.817 回答
0

通过为 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);}
);

工作代码笔

于 2018-10-29T17:10:17.677 回答
-2

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

$('.class1').mouseover(function() {
    $(this).toggleClass('class2');
 });
于 2011-02-07T10:18:31.083 回答