I have this simple code:
$('.featureItems li').hover(
function(){ $(this).addClass('hover') },
function(){ $(this).removeClass('hover') }
)
如何添加淡入淡出效果,让添加/删除类的过程更加平滑?
我需要使用animate()吗?
谢谢
I have this simple code:
$('.featureItems li').hover(
function(){ $(this).addClass('hover') },
function(){ $(this).removeClass('hover') }
)
如何添加淡入淡出效果,让添加/删除类的过程更加平滑?
我需要使用animate()吗?
谢谢
$('.featureItems li').hover(
function(){ $(this).addClass('hover', 500) },
function(){ $(this).removeClass('hover', 500) }
)
更新:
为了防止在快速的鼠标悬停进出过程中动画队列被堵塞或不一致,您还可以在开始添加/删除类之前强制停止现有的动画:
$('.featureItems li').hover(
function(){ $(this).stop(true).addClass('hover', 500) },
function(){ $(this).stop(true).removeClass('hover', 500) }
)
除了@Dave Ward的回答之外,我还必须删除removeClass()中的stop(true)部分,否则在第一次mouseover/mouseout之后,mouseover部分将停止工作:
$('.featureItems li').hover(
function(){ $(this).stop(true).addClass('hover', 500) },
function(){ $(this).removeClass('hover', 500) }
)
.featureItems li
的属性为以下内容:.featureItems li {
transition: transform 1s, background-color 1s;
-moz-transition: -moz-transform 1s, background-color 1s;
-webkit-transition: -webkit-transform 1s, background-color 1s;
-o-transition: -o-transform 1s, background-color 1s;
}
这将使CSS3能够在您对.hover
所做的任何更改之间进行导航,例如:
.hover {
background-color: #DDD;
transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
-webkit-transform:scale(1.1,1.1);
-o-transform:scale(1.1,1.1);
}
你可以在这里找到更多关于CSS3过渡的信息:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions