这可以做到吗?
例如:
.class1{
background-image:(whatever.jpg)
color: #fff;
}
.class2{
background-image:(whatever2.jpg)
color: #999;
}
当鼠标悬停在具有class1的元素上时,我能否使所有class1元素变成class2元素,当鼠标移开时,又将class2元素还原为class1元素?
这可以做到吗?
例如:
.class1{
background-image:(whatever.jpg)
color: #fff;
}
.class2{
background-image:(whatever2.jpg)
color: #999;
}
当鼠标悬停在具有class1的元素上时,我能否使所有class1元素变成class2元素,当鼠标移开时,又将class2元素还原为class1元素?
如果您不想使用插件,可以按照以下步骤进行:
$(".class1").hover(
function () {
$(this).fadeOut(function () {
$(this).removeClass("class1").addClass("class2").fadeIn('fast');
});
},
function () {
$(this).fadeOut(function () {
$(this).removeClass("class2").addClass("class1").fadeIn('fast');
});
});
可以查看jQuery UI对addClass
的扩展。它允许使用持续时间参数来实现动画效果。
在这里,我认为你想做的事情类似于这样:
$('.class1').hover(function(){
$(this).addClass('class2', 800);
}, function(){
$(this).removeClass('class2', 800);
});
显然,您需要安装jQuery UI才能实现此功能。
我认为这个插件是您正在寻找的。它允许您在类之间进行动画处理。例如:
$('.class1').animateToClass('.class2', 1000);
这是我的实现:
$(this).fadeOut("fast"); or $(this).hide();
$(this).removeClass('css1').addClass('css2');
$(this).fadeIn("slow");
$("div.class1").hover(
function(){$("div").switchClass("class1", "class2").fadeIn(800);},
function(){$("div").switchClass("class2", "class1").fadeIn(800);}
);
我认为这可能对你有所帮助...
$('.class1').mouseover(function() {
$(this).toggleClass('class2');
});