前一阵子写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. 关于Qt在子线程中使用QMessageBox的折衷方法

    Qt将所有GUI相关的处理都限制在主线程中,这么做有助于防止意想不到的访问冲突产生,但也限制了线程中某些简单的UI交互的实现,比如QMessageBox. 因为QMessageBox必须在主线程中打开 ...

  2. Local System、Local Service與Network Service

    CreateService参数介绍SC_HANDLE CreateService( SC_HANDLE hSCManager, //服务控制管理程序维护的登记数据库的句柄,由系统函数OpenSCMan ...

  3. -_-#【AngularJS】

    ele.me 是如何运行的 客户端JavaScript的5个弊端 [翻译]构建自己的AngularJS,第一部分:Scope和Digest 绑定window的不会自动移除?

  4. 【转】vim 修改tab为四个空格

    原文网址:http://blog.sina.com.cn/s/blog_620ccfbf01010erz.html 为了vim更好的支持python写代码,修改tab默认4个空格有两种设置方法: 1. ...

  5. HTTP学习笔记7-消息报头

    41,消息报头-实体报头 请求和响应消息可以传送一个实体.一个实体由实体报头域和实体正文组成,在大多数情况下,实体正文就是请求消息中的请求正文或者响应消息中的响应正文.但是在发送时,并不是说实体报头域 ...

  6. Asp.Net Mvc+Angular.Js自测小Demo

    参考:http://www.cnblogs.com/eedc/p/6082052.html 一.引用anguler: 1.angular.js 2.angular-route.js 3.app.js ...

  7. 2份能用的log4j.xml

    1 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE log4j:configuration ...

  8. 从VSS到SVN再到Git 记Git的基本操作

    Source code control 一直是软件开发过程中重要的环节,从最初的纯文件备份,到使用工具进行管理.Source code control 工具的作用也不仅仅只是单纯的对同一个版本进行管理 ...

  9. jquery中prop()方法和attr()方法的区别(转)

    jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 官方例举的例子感觉和attr()差不多,也不知道有什么区别,既然有了pro ...

  10. Qt Style Sheets Reference

    Qt Style Sheets support various properties, pseudo-states, and subcontrols that make it possible to ...