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 ...
随机推荐
- H.264 Quantization
H.264 Quantizer 一般的量化器,可用下面的公式来表示: $Z=\pm \left \lfloor\frac{ \left | W \right | }{\bigtriangleup }\ ...
- 199bit总结的影响最大的十个算法
1. 归并排序(MERGE SORT).快速排序(QUICK SORT)和堆积排序(HEAP SORT) 哪个排序算法效率最高?这要看情况.这也就是我把3种算法放在一起讲的原因,可能你更常用其中一种, ...
- Spark SQL Table Join(Python)
示例 Spark SQL注册“临时表”执行“Join”(Inner Join.Left Outer Join.Right Outer Join.Full Outer Join) 代码 fr ...
- 【翻译】Organizing ASP.NET MVC solutions 如何组织你的ASP.NET MVC解决方案
序言 时隔一年,弦哥重出江湖,对于我们学习.NET MVC那将有大大的好处,期待弦哥的重构系列.在弦哥与jerrychou的交流中提到了一篇文章http://lostechies.com/jimmyb ...
- Hotel - poj 3667(求连续子区间)
题意:有两种操作 1,从左往右找一个区间是 D 的连续序列,然后覆盖,返回区间最前面的数,如果没有输出0 2, 释放从L开始连续D的区间 分析:就是从左往右查找一个D的连续区间,可以使用三个值操作ls ...
- 安卓开发24:FrameLayout布局
FrameLayout布局 FrameLayout是五大布局中最简单的一个布局.FrameLayout布局中的元素会根据先后顺序重叠起来.利用FrameLayout布局元素重叠的特性,我们一般可以做一 ...
- 史上最全maven pom.xml详解
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- 3分钟学会sessionStorage用法(h5页面返回滚动到上次浏览器位置)
前言: 因最近移动端开发过程中遇到一个运营提出的所谓技术难点需求,对于原生APP来说轻而易举,毕竟自己的APP用户操作指哪打哪,但是H5该怎么做?H5就实现不了么?对于一个爱研究攻克这些前端棘手问题的 ...
- CF380C Sereja and Brackets [想法+线段树]
题意: 给出一串括号 给出一些询问,问某个区间[l,r]内的能合法匹配的括号数有多少个 分析: 我们能够实现处理两个数组 sum[i] 1....i中已经能匹配的右括号的数目 left[i] 1... ...
- Windows下搭建MySQL Master Slave[转]
Windows下搭建MySQL Master Slave 一.背景 服务器上放了很多MySQL数据库,为了安全,现在需要做Master/Slave方案,因为操作系统是Window的,所以没有办法使用k ...