通过jQuery修改元素CSS3属性达到想要的动画延迟效果,但是Firefox34有点奇葩,只有第一次有延时效果,然后就没任何效果了.但是在Chrome下就好好的.求解释,这个问题纠结了好几天了!代码如下(注:需要jQuery插件支持.第六行代码,该路径即可):
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".test").hide();
var delayTime = 0;
/*遍历,动画延迟,这就是问题的所在,求解释*/
$(".test").each(function () {
$(this).css({
"-webkit-animation-delay": delayTime + "ms",
"-moz-animation-delay": delayTime + "ms",
"animation-delay": delayTime + "ms"
});
delayTime += 300;
});
$(".btn").mouseover(function () {
$(".test").show().css({
"-webkit-animation-play-state":"running",
"-moz-animation-play-state":"running",
"animation-play-state":"running"
});
});
$(".btn").mouseout(function () {
$(".test").hide();
});
});
</script>
<style type="text/css">
.test{
width: 50px;
height: 50px;
background-color: #ff4f0f;
margin-top: 10px;
-webkit-animation:slideToRight 1s ease-out;
-webkit-animation-fill-mode: forwards;
-webkit-animation-play-state: paused;
-moz-animation:slideToRight 1s ease-out ;
-moz-animation-fill-mode: forwards;
-moz-animation-play-state: paused;
animation:slideToRight 1s ease-out ;
animation-fill-mode: forwards;
animation-play-state: paused;
}
@-webkit-keyframes slideToRight {
0%{-webkit-transform: translateX(0px);}
100%{-webkit-transform: translateX(400px);}
}
@keyframes slideToRight {
0%{transform: translateX(0px);}
100%{transform: translateX(400px);}
}
</style>
</head>
<body>
<input type="button" class="btn" value="鼠标经过"/>
<div class="test t1"></div>
<div class="test t2"></div>
<div class="test t3"></div>
<div class="test t4"></div>
<div class="test t5"></div>
</body>
</html>
Keyro