我有一些 div(基本上只是图像),当它们旋转 360 度时我会淡入它们。在所有主流浏览器中一切都可以完美运行,但 IE 除外。
有效的 CSS3 代码
#box
{
width: 400px;
height: 400px;
display: inline-block;
position: absolute;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transition: all 0.8s 1s ease-in-out;
-webkit-transition: all 0.8s 1s ease-in-out;
-moz-transition: all 0.8s 1s ease-in-out;
-o-transition: all 0.8s 1s ease-in-out;
opacity:0;
}
#box.animate
{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
opacity:100;
}
现在我的 jQuery 代码是
$("#box").addClass("animate");
不幸的是,这就是我对 jQuery 知识的了解。我知道我可以使用fadeIn()
函数来处理不透明度设置,但是有什么可以处理旋转部分呢?使用任何类型的插件实际上也是最后的手段。我只需要它在 IE9 中工作。如果它可以在 Chrome、FF 和 Opera 中运行,那就太好了,但不是必须的。
是不是有类似的东西
$("#box").animate(function() {
$(this).fadeIn(1000).rotate(360);
});
我觉得这是一个相当简单的解决方案,我只是想不出如何去做。另外,我不知道该代码是否有效,我不是 JS 大师。
听起来像是jquery的step函数要解决的问题。它比使用插件更轻一些,并且您应该能够自定义不透明度和旋转动画。This https://stackoverflow.com/a/15191130/1767192是一篇关于如何使用阶跃函数的优秀文章。从那篇文章中我得出以下结论:
function AnimateRotate(div_id, angle) {
var $elem = $(div_id);
$({deg: 0}).animate({deg: angle}, {
duration: 1000,
step: function(now) {
$elem.css({
transform: 'rotate(' + now + 'deg)'
});
}
});
$({opacity: 0}).animate({opacity: angle}, {
duration: 1000,
step: function(now) {
$elem.css({
opacity: now
});
}
});
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)