css3动画和jquery动画使用中要注意的问题_html/css_WEB-ITnose
1. css3动画讨论
先看代码:
html:
css:
#hehe { width: 100px; height: 100px; padding: 10px; background: red; -webkit-transition: all 10s ease-out; -moz-transition: all 10s ease-out; -o-transition: all 10s ease-out; transition: all 10s ease-out;}
js:
$(document).ready(function() { $('.change').click(function() { $('#hehe').width(400); }); $('.get').click(function() { console.log($('#hehe').width()); });});
代码很简单。我们给hehe这个div添加了红色的背景色,并且使用了css3里的动画平滑效果css3 trasition(css3 trasition的使用方法可以参考这篇文章:http://www.w3cplus.com/content/css3-transition,写的很详细)。也就是说当hehe发生诸如宽高,背景或者是字体等css属性变化时候,会有ease-out(减速)平滑过渡效果,效果持续10秒。比如说我们点击change按钮,hehe的宽度会消耗10s的时间,慢慢增加到400px,产生动画效果。
问题来了:在动画进行过程中,我单击get按钮,控制台输出的hehe宽度是多少?
一开始我以为是400,因为点击change的时候,审查元素看到"
"。答案是否定的,我们得到的是动画进行过程中点击时刻hehe的宽度。我们修改下console的代码:
console.log($('#hehe').css('width');
这下我们看到在整个动画过程中,我们点击get,得到的都是400px。这说明jquery里面的width()是实时获取元素宽度的,而css('width')只是单纯的获取元素的css值,因为也是带单位的。
2.jquery动画讨论
jquery动画就比较好理解了。我们去掉css3 transition的css代码,用jquery的animate来代替。
$(document).ready(function() { console.log($('#hehe').width()); $('.change').click(function() { $('#hehe').animate({width: "400px"}, 10000); }); $('.get').click(function() { console.log($('#hehe').width()); });});
由于jquery的动画实际上是动态的给元素添加style样式,所以无论我们是用width()还是css('width')来获取hehe的宽度都是动态变化的。不过也有一点不同,使用width得到的宽度是没有单位px的,而且都是整数;但是使用css('width')获得的宽度是带单位的,并且小数点后面位数很长。
总结:
讨论了这么多,其实关键就是要告诉大家,在使用动画的时候,如果立刻去获取还在变化中的css属性,尤其是宽高,很容易出现问题,必须等到动画结束后在去取这些元素的属性。或者你可以指定需要动画效果的css属性。打个比方,你要获得动画中的宽高,而实际上你想要的动画效果只是背景颜色的变化,那么你在写css3 transition的时候就可以这么写
-webkit-transition: background .7s ease-out;-moz-transition: background .7s ease-out;-o-transition: background .7s ease-out;transition: background .7s ease-out;
这样动画效果只会表现在背景色,而宽高是不会动态变化了。
同样的,对css3动画中的另外两个效果transform(http://www.w3cplus.com/content/css3-transform)和animation(http://www.w3cplus.com/content/css3-animation)也做了测试,发现跟transition是一样的,动画过程中元素属性都是动态变化的,甚至在运用animation的时候,用css('width')这样得到的宽度也是变化的了。感兴趣的同学可以去试试。
因此我们在运用css3动画的时候还需要多多注意动画带来的影响。
上一篇: centos 6.x安装Mongodb
下一篇: PS鼠绘逼真的奶油冰激凌巧克力蛋糕
推荐阅读
-
使用jQuery timelinr和animate.css创建超酷的CSS动画时间轴特效_html/css_WEB-ITnose
-
用C3中的animation和transform写的一个模仿加载的时动画效果_html/css_WEB-ITnose
-
用css3和canvas实现的蜂窝动画效果_html/css_WEB-ITnose
-
使用CSS3实现超炫的Loading(加载)动画效果_html/css_WEB-ITnose
-
jquery ui 的dialog样式问题求助!!!右上角的关闭和右下角的控制大小的都和demo中的不一样!_html/css_WEB-ITnose
-
用css3和canvas实现的蜂窝动画效果_html/css_WEB-ITnose
-
css3的基础用法,新手必看哈(还有css3和jquery动画的对比)_html/css_WEB-ITnose
-
CSS3中动画TRANSFORM必须要了解的SKEW变化原理_html/css_WEB-ITnose
-
jquery ui 的dialog样式问题求助!!!右上角的关闭和右下角的控制大小的都和demo中的不一样!_html/css_WEB-ITnose
-
使用css3的动画模拟太阳系行星公转_html/css_WEB-ITnose