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

直接上代码

<!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. 如何在自己的窗体（控件）中显示XAF的视图

    Form form = new Form(); DevExpress.ExpressApp.View listView = Application.CreateListView(Application ...

  2. hadoop2.7.3配置文件中过时的属性

    过时的属性:Deprecated Properties 该列表保存于:hadoop-2.7.3-src\hadoop-common-project\hadoop-common\src\site\mar ...

  3. MVC文章汇总

    http://www.cnblogs.com/yaozhenfa/category/541420.html http://www.cnblogs.com/yubaolee/p/3269043.html ...

  4. getElementsByClassName 兼容性

    getElementsByClassName是html5 新增加的一个类名.该方法可以让我们通过class属性中的类名来访问元素.不过该方法比较新,某些DOM树还没有,因此在使用中要当心.由于只有较新 ...

  5. ZigBee 安全探究

    ZigBee 安全探究 0x02 ZigBee安全机制 (注:对于本节内容,可能在新版ZigBee协议标准中会有所变化,请以新版为准.) ZigBee主要提供有三个等级的安全模式: 1. 非安全模式: ...

  6. Asp.Net_Mvc_获取当前Url、Controller、Action

    一.URL的获取很简单,ASP.NET通用: [1]获取 完整url (协议名+域名+虚拟目录名+文件名+参数) string url=Request.Url.ToString(); [2]获取 虚拟 ...

  7. Ajax聊天

    结构: index.html <!DOCTYPE html> <html> <head> <title>index.html</title> ...

  8. 使用Kylin构建企业大数据分析平台的4种部署方式

    本篇博客重点介绍如何使用Kylin来构建大数据分析平台.根据官网介绍,其实部署Kylin非常简单,称为非侵入式安装,也就是不需要去修改已有的 Hadoop大数据平台.你只需要根据的环境下载适合的Kyl ...

  9. 在VMware8.0.4安装centos6.3出现蓝屏，显示“anaconda: Fatal IO error 104 (Connection reset by peer) on X server :1.0. install exited abnormally [1/1]”？

    解决方案:在创建虚拟机时选择“自定义(高级)”,然后点击“下一步”,在弹出的对话框中,在硬件兼容性该项选择 Workstation6.5-7.x.如果创建虚拟机时选择“标准”,默认的硬件兼容性将是Wo ...

  10. web自学网站

    coursera 网站很多新的技术,都是大牛和牛大学的,和外国新技术.   我要自学网 有好也有不怎么样的,一般般的.但是dome多.   中国教程网  一般.   CSDN   技术相关    站长 ...