css3动画和jquery动画使用中要注意的问题
前一阵子写demo的时候遇到这样一个问题,就是给元素添加css3或者jquery动画时,在动画结束前不能准确取到元素的css属性。
1. css3动画讨论
先看代码:
html:
<div id="hehe"></div>
<button class="change">change</button>
<button class="get">get</button>
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的时候,审查元素看到"<div id="hehe" style="width: 400px;"></div>"。答案是否定的,我们得到的是动画进行过程中点击时刻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动画的时候还需要多多注意动画带来的影响。
css3动画和jquery动画使用中要注意的问题的更多相关文章
- jquery动画效果总结
一.jquery的动画速度fast-slow对应着600ms,200ms,不写是400ms 二.禁用jquery的动画 将jQuery.fx.off设置为true即可 $(".stoppin ...
- jQuery+CSS3实现404背景动画特效
效果:http://hovertree.com/texiao/jquery/74/ 源码下载:http://hovertree.com/h/bjaf/ko0gcgw5.htm 效果图如下: 代码如下: ...
- 基于jQuery CSS3鼠标点击动画效果
分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="co ...
- 30款基于 jQuery & CSS3 的加载动画和进度条插件
我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...
- 16款创建CSS3动画的jQuery插件
jQuery插件是用来扩展jQuery原型对象的方法. 本文搜集了用来为你的站点创建CSS3动画的一些jQuery插件. 1. jQuery Smoove Smoove 简化了CSS3转换效果.使得页 ...
- 使用jquery封装的动画脚本(无动画、css3动画、js动画)
自己封装好的showhide.js 包含无动画.css3动画.js动画 包括:fade(淡入淡出) slideUpDown(上下滑动) slideLeftRight(左右滑动) fadeSlid ...
- 让网站动起来!12款优秀的 jQuery 动画插件推荐
如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...
- 使用 CSS3 动感的图片标题动画效果【附源码下载】
在网站中,有很多地方会需要在图片上显示图片标题.使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果.没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作.您可 ...
- html5网页动画总结--jQuery旋转插件jqueryrotate
CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...
随机推荐
- jquery序列化form表单使用ajax提交后处理返回的json数据
1.返回json字符串: /** 将一个字符串输出到浏览器 */ protected void writeJson(String json) { PrintWriter pw = null; try ...
- UOJ #78 二分图最大匹配
#78. 二分图最大匹配 从前一个和谐的班级,有 nl 个是男生,有 nr 个是女生.编号分别为 1,…,nl 和 1,…,nr. 有若干个这样的条件:第 v 个男生和第 u 个女生愿意结为配偶. 请 ...
- BZOJ1657: [Usaco2006 Mar]Mooo 奶牛的歌声
1657: [Usaco2006 Mar]Mooo 奶牛的歌声 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 489 Solved: 338[Submi ...
- Java WeakHashMap 源码解析
前面把基于特定数据结构的Map介绍完了,它们分别利用了相应数据结构的特点来实现特殊的目的,像HashMap利用哈希表的快速插入.查找实现O(1)的增删改查,TreeMap则利用了红黑树来保证key的有 ...
- N - Optimal Milking - POJ 2112(二分图多重匹配+Floyd+二分搜索)
题意:有K太挤奶机,C头奶牛,每个挤奶机每天只能为M头奶牛服务,下面给的K+C的矩阵,是形容相互之间的距离,求出来走最远的那头奶牛要走多远 分析:应该先使用floyd求出来点之间的最短路??(不晓得给 ...
- label标签的属性
//label标签的属性 - (void)viewDidLoad { //初始化一个label1标签对象,初始化有很多方法,最原始的就是init,此处用带有frame的方法 UILabel *labe ...
- Ubuntu14.04下安装ns2.35
我选择的版本是2.35最新版本,安装环境是Ubuntu 14.04. 1.下载ns2的安装包,这里我选择的是ns-allinone-2.35.tar.gz压缩格式的all in one安装包,all ...
- <五>读《《大话设计模式》》之工厂模式
怎么又是工厂模式呢?上次不是讲过简单工厂模式吗?不错.此工厂模式非彼工厂模式. 工厂模式:定义一个用于创建对象的接口.让子类决定实例化那一个类,工厂方法是一个类的实例化延迟到其子类. 还是以代码来进行 ...
- 关于scanf的几种处理方法
字符输入中,赋值顺序和缓存的联系 scanf是从标准输入缓冲区中读取输入的数据,假设连续输入两个%c格式的字符.而中间又要涉及回车,那么第二个字符将被赋予回车. 解决的方法: .清空输入缓冲区 第一个 ...
- CVE-2014-0196(马拉松赛跑bug)
/* * CVE-2014-0196: Linux kernel <= v3.15-rc4: raw mode PTY local echo race * condition * * Sligh ...