悬停时,jQuery将元素从一个类淡化到另一个类
Posted
技术标签:
【中文标题】悬停时,jQuery将元素从一个类淡化到另一个类【英文标题】:jQuery fade elements from one class to another, on hover 【发布时间】:2011-06-22 15:27:44 【问题描述】:这个可以吗?
例如。
.class1
background-image:(whatever.jpg)
color: #fff;
.class2
background-image:(whatever2.jpg)
color: #999;
当鼠标悬停在元素上时,是否可以将所有具有 class1 的元素淡化为 class2,并在鼠标离开时淡化回 class1?
【问题讨论】:
【参考方案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 方法可以打开和关闭一个元素的一个类。它与两个类和它们之间的切换无关。以上是关于悬停时,jQuery将元素从一个类淡化到另一个类的主要内容,如果未能解决你的问题,请参考以下文章
jQuery 悬停 mouseover/mouseout 计时