通过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>
- 1 回答
- 0 关注
- 2403 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消