前一阵子写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动画使用中要注意的问题的更多相关文章

  1. jquery动画效果总结

    一.jquery的动画速度fast-slow对应着600ms,200ms,不写是400ms 二.禁用jquery的动画 将jQuery.fx.off设置为true即可 $(".stoppin ...

  2. jQuery+CSS3实现404背景动画特效

    效果:http://hovertree.com/texiao/jquery/74/ 源码下载:http://hovertree.com/h/bjaf/ko0gcgw5.htm 效果图如下: 代码如下: ...

  3. 基于jQuery CSS3鼠标点击动画效果

    分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="co ...

  4. 30款基于 jQuery & CSS3 的加载动画和进度条插件

    我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...

  5. 16款创建CSS3动画的jQuery插件

    jQuery插件是用来扩展jQuery原型对象的方法. 本文搜集了用来为你的站点创建CSS3动画的一些jQuery插件. 1. jQuery Smoove Smoove 简化了CSS3转换效果.使得页 ...

  6. 使用jquery封装的动画脚本(无动画、css3动画、js动画)

    自己封装好的showhide.js 包含无动画.css3动画.js动画 包括:fade(淡入淡出)  slideUpDown(上下滑动)  slideLeftRight(左右滑动)  fadeSlid ...

  7. 让网站动起来!12款优秀的 jQuery 动画插件推荐

    如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...

  8. 使用 CSS3 动感的图片标题动画效果【附源码下载】

    在网站中,有很多地方会需要在图片上显示图片标题.使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果.没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作.您可 ...

  9. html5网页动画总结--jQuery旋转插件jqueryrotate

    CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...

随机推荐

  1. jquery序列化form表单使用ajax提交后处理返回的json数据

    1.返回json字符串: /** 将一个字符串输出到浏览器 */ protected void writeJson(String json) { PrintWriter pw = null; try ...

  2. UOJ #78 二分图最大匹配

    #78. 二分图最大匹配 从前一个和谐的班级,有 nl 个是男生,有 nr 个是女生.编号分别为 1,…,nl 和 1,…,nr. 有若干个这样的条件:第 v 个男生和第 u 个女生愿意结为配偶. 请 ...

  3. BZOJ1657: [Usaco2006 Mar]Mooo 奶牛的歌声

    1657: [Usaco2006 Mar]Mooo 奶牛的歌声 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 489  Solved: 338[Submi ...

  4. Java WeakHashMap 源码解析

    前面把基于特定数据结构的Map介绍完了,它们分别利用了相应数据结构的特点来实现特殊的目的,像HashMap利用哈希表的快速插入.查找实现O(1)的增删改查,TreeMap则利用了红黑树来保证key的有 ...

  5. N - Optimal Milking - POJ 2112(二分图多重匹配+Floyd+二分搜索)

    题意:有K太挤奶机,C头奶牛,每个挤奶机每天只能为M头奶牛服务,下面给的K+C的矩阵,是形容相互之间的距离,求出来走最远的那头奶牛要走多远 分析:应该先使用floyd求出来点之间的最短路??(不晓得给 ...

  6. label标签的属性

    //label标签的属性 - (void)viewDidLoad { //初始化一个label1标签对象,初始化有很多方法,最原始的就是init,此处用带有frame的方法 UILabel *labe ...

  7. Ubuntu14.04下安装ns2.35

    我选择的版本是2.35最新版本,安装环境是Ubuntu 14.04. 1.下载ns2的安装包,这里我选择的是ns-allinone-2.35.tar.gz压缩格式的all in one安装包,all ...

  8. &lt;五&gt;读《《大话设计模式》》之工厂模式

    怎么又是工厂模式呢?上次不是讲过简单工厂模式吗?不错.此工厂模式非彼工厂模式. 工厂模式:定义一个用于创建对象的接口.让子类决定实例化那一个类,工厂方法是一个类的实例化延迟到其子类. 还是以代码来进行 ...

  9. 关于scanf的几种处理方法

    字符输入中,赋值顺序和缓存的联系 scanf是从标准输入缓冲区中读取输入的数据,假设连续输入两个%c格式的字符.而中间又要涉及回车,那么第二个字符将被赋予回车. 解决的方法: .清空输入缓冲区 第一个 ...

  10. CVE-2014-0196(马拉松赛跑bug)

    /* * CVE-2014-0196: Linux kernel <= v3.15-rc4: raw mode PTY local echo race * condition * * Sligh ...