写插件时遇到的一个小问题,关于animate和css3的问题

  昨天写代码时,偶然想到了如果我们把css3属性放在animate中,指定时间。能否实现动画呢。举个例子吧:

<script>
		$(".box").animate({
			"-webkit-transform":"rotate(90deg)"
		},1000);
</script>

  如上代码,box会在一秒种从0deg旋转到90deg吗?答案是否定的。

  于是我查了下jquery的手册,发现animate的第一参数中确实不能放css3的属性。于是乎怎么办呢?

我在stackoverflow上发现了一个技巧,来用js操作css3属性动画。当然有人要问了,用animation不就好了吗?问题是,animation过于死板了,并且只能用在一个对象上。如果我在改变。box的属性时,还要同时改变另一个box2的css,用animation就不行了。

  那么,我们换一种方式利用jquery的animation函数。

$({property:0}).animate({property:100},
{
duration:500;
step:$(".box").css("
-webkit-transform
","rotate("+this.property/100*90+"deg)")
} );

  其实现在有些网站上的激光加载条,就是通过这种方式做的。

posted @ 2015-03-21 10:24  低调的大白兔  阅读(411)  评论(0编辑  收藏  举报