一个物体可以同时做多个运动，而不是完成一个运动再一个运动，而是让你感觉他们是同时发生的。

直接上代码

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>同时运动</title>

	<style>

		.animation{

			background-color: green;

			height: 200px;

			width: 200px;

			position: absolute;

			opacity: 0.3;

			left:0px;

			filter:alpha(opacity:30);

		}

	</style>

</head>

<body>

	<div id="test" class="animation" ></div>

</body>

 <script type="text/javascript">

    window.onload = function(){

    	var ele = document.getElementById("test"),

            timer = null;

    	ele.onmouseover = function(){

    		startAnimation(ele,{left:100,opacity:100},function(){

    		});

    	}

       function startAnimation(node,json,fn){

       	  //1.清空定时器

       	 clearInterval(timer);

       	 //2.重新生成一个定时器

       	 timer = setInterval(function(){

          //定义一个指标，所有的属性没有到达目标则不能清除定时器

          var success = false;

          for(attr in json){

            var target = json[attr];

       	 	  var _currentAttrValue = null;

       	 	  if(attr == 'opacity'){

       	 	  	_currentAttrValue = Math.round(parseFloat(getStyle(node,attr))*100);

       	 	  }else{

       	 	  	_currentAttrValue = parseInt(getStyle(node,attr));

       	 	  }

       	 	  if(_currentAttrValue == target){

       	 	  	break;

       	 	  }else{

              success = false;

              if(_currentAttrValue > target){

                _currentAttrValue --;

              }else{

                _currentAttrValue ++ ;

              }

              if(attr == 'opacity'){

                node.style[attr] = _currentAttrValue/100;

                node.style.filter = 'alpha(opacity:'+_currentAttrValue+')';

              }else{

                console.log(_currentAttrValue);

                node.style[attr] = _currentAttrValue+'px';

              }

            }

          }

          if(success){

            clearInterval(timer);

            if(fn){

              fn();

            }

          }

       	 },10)

       }

       function getStyle(ele,attr){

	       	if(window.getComputedStyle){

	       		return getComputedStyle(ele,null)[attr];

	       	}else{

	       		return ele.currentStyle[attr];

	       	}

       }

    }

 </script>

</html>

　　自己去体会一下，当所有的属性到达目标的时候，才能清空定时器，不然有些属性没有到达属性的目标值就停止了。

大家可以可以去参考一下jquery的animate的方法，支持同时运动

js动画之同时运动的更多相关文章

  1. js动画---多物体运动

    对于多物体运动和单个物体运动来说,没有特别大的区别,实现原理基本上是一样的,都是通过定时器来实现的,但是多物体有一些地方需要注意,具体哪些需要注意,我将在下面的程序中说明. 首先,我们需要建立几个li ...

  2. js动画之简单运动一

    虽然现在css3已经有了很多动画效果希望后面有时间也写一些博客,但是先开始我们的基础动画的学习. 1.制作动画常用的属性就是left,right,height,width,opacity等属性 2.因 ...

  3. js动画之链式运动

    链式运动就是当一个运动完,又启动另外一个运动,这个怎么实现呢?这里我们是用用回调函数实现一套链式动画 显示给div左移100像素,然后然后透明度变100 <!DOCTYPE html> & ...

  4. js动画之缓冲运动

    缓冲运动就是运动的速度与时间或者距离有关联,不是一般的匀速运动 <!DOCTYPE html> <html lang="en"> <head> ...

  5. js动画之简单运动二

    透明度的变化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  6. js动画--链式运动

    前面几节我们只是讲述了一种运动,这节课我将讲述链式运动:就以一个动作接着一个动作完成. 对于这个实现,我们只需要改变一下就可以实现了,设置一个回调函数. var timer; window.onloa ...

  7. JS动画理论

    动画(Animation) 动画意味着随着时间而变化,尤其指视觉上的变化,包括位置.形态等的变化.运动基本上表现为物体随时间,发生位置上的变化:形态基本表现为大小.颜色.透明度.形状等随时间的变化. ...

  8. js动画学习（二）

    四.简单动画之缓冲运动 实现速度的缓冲,即不同位置的速度不同,越靠近目标值速度越小,所以速度值与目标值与当前值之差成正比.这里要注意一个问题就是物体在运动中速度是连续变化的,不是按照整数变化的,当物体 ...

  9. js动画（四）

    终于到了最后了,这里要告一段落了,整了个js运动框架,咳咳咳,好冷 啊啊啊啊啊啊,这天气.妈的,工资怎么也不发,啊,说好的 人与人之间的信任呢?哎,气诶,不到150字啊,又是这个梗..怎么办?说些什么 ...

随机推荐

  1. Gbase数据库备份与还原

    备份命令:cd D:\GeneralData\GBase\Server\bin        回车 后 : d :        回车 后: dump.exe -usysdba(u+用户名) -pbj ...

  2. Android导航栏菜单强制转换

    private void getOverflowMenu() { ViewConfiguration viewConfig = ViewConfiguration.get(this); try { F ...

  3. RESTFUL API 安全设计指南

    RESTFUL API 安全设计指南 xxlegend · 2015/10/18 15:08 0x01 REST API 简介 REST的全称是REpresentational State Trans ...

  4. PHPStorm技巧篇 -- 全局搜索

    自定义快捷键,找到search everywhere 我绑定的是alt+N 设置好并apply后,在项目中使用:快捷键alt+N ,输入自己需要查找的文件或类名或方法名,即可出现相应的选项. so c ...

  5. ViewPager onPageChangeListener

    今天在做项目的时候,由于要处理viewPager页面滑动的事件,所以对其进行了一个小小的研究: 首先ViewPager在处理滑动事件的时候要用到OnPageChangeListener OnPageC ...

  6. 知乎背景图 canvas 效果

    思路分析: 1.创造一块画布, 2.在画布内随机产生一些小球,小球位置,半径,颜射,大小,速度等都可以随机产生, 3.定义画小球函数与小球移动函数, 4.将每一个小球圆心都与其它小球链接, 5判断每一 ...

  7. es5 and es6

    es5学习地址:http://www.zhangxinxu.com/wordpress/2013/04/es5%E6%96%B0%E5%A2%9E%E6%95%B0%E7%BB%84%E6%96%B9 ...

  8. ADO.NET 基础 (SQL Server)

    一.Web.config配置 <connectionStrings> <add name="constr_name" connectionString=" ...

  9. eclipse通过JDBC连接数据库不成功

    配置时出现以下错误: java.lang.ClassNotFoundException:org.gjt.mm.mysql.Driver 则肯定是CLASSPATH设置有问题,也有可能是命令行方式没有重 ...

  10. Java_I/O输入输出_实现当用户输入姓名和密码时，将每一个姓名和密码加在文件中，如果用户输入done,就结束程序。

    import java.io.*; public class Example { static final int lineLength = 81; public static void main(S ...