链式运动就是当一个运动完，又启动另外一个运动，这个怎么实现呢？这里我们是用用回调函数实现一套链式动画

显示给div左移100像素，然后然后透明度变100

<!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;

    	//alert(getStyle(ele,'opacity'))

    	ele.onmouseover = function(){

    		startAnimation(ele,'left',100,function(){

    			startAnimation(ele,'opacity',100);

    		});

    	}

       function startAnimation(node,attr,target,fn){

       	//1.清空定时器

       	 clearInterval(timer);

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

       	 timer = setInterval(function(){

       	 	  var _currentAttrValue = null

       	 	  if(attr == 'opacity'){

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

       	 	  }else{

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

       	 	  }

       	 	   //3.当对应的属性到达了目标想要的属性，那么就清除定时器，并调用回调函数

       	 	  if(_currentAttrValue == target){

       	 	  	clearInterval(timer);

       	 	  	if(fn){

       	 	  		fn();

       	 	  	}

       	 	  }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';

       	 	  	}

       	 	  }

       	 },10)

       }

       function getStyle(ele,attr){

	       	if(window.getComputedStyle){

	       		return getComputedStyle(ele,null)[attr];

	       	}else{

	       		return ele.currentStyle[attr];

	       	}

       }

    }

 </script>

</html>

　　大家可以看看效果

js动画之链式运动的更多相关文章

  1. js动画--链式运动

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

  2. JS之链式运动，及任意值运动框架，包括透明度的改变

    链式运动,顾名思义,一环扣一环,即执行完一个事件后,再接着执行下一个事件,在参数上面动手脚,将下一个要执行的函数名作为一个参数,即利用到回掉函数,下面代码中出现的fn,即回掉函数, function ...

  3. （43）JS运动之链式运动框架

    链式运动框架就是一系列的运动分阶段进行,在普通的运动框架上加上一个參数function,这个function表示下一个要运行的动作.详细代码例如以下: <!DOCTYPE HTML> &l ...

  4. js动画之简单运动一

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

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

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

  6. js动画之缓冲运动

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

  7. js动画之同时运动

    一个物体可以同时做多个运动,而不是完成一个运动再一个运动,而是让你感觉他们是同时发生的. 直接上代码 <!DOCTYPE html> <html lang="en" ...

  8. Javascript之链式运动框架1

    第一部分:HTML内容: <script src="6-1.js"></script> <script> window.onload=funct ...

  9. js动画之简单运动二

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

随机推荐

  1. Linux系统下安装Mysql

    原文档地址:http://www.itpub.net/thread-1766546-1-1.html 1.在Linux服务器上通过wget命令取得rpm包: wget –c http://dev.my ...

  2. [bzoj2743][HEOI2012]采花(树状数组+离线)

    2743: [HEOI2012]采花 Time Limit: 15 Sec  Memory Limit: 128 MBSubmit: 1832  Solved: 954[Submit][Status] ...

  3. VS.Net 2015 Update3 学习(1) 支持Webpack

    让vs.net 编译的时候自动执行webpack 首先 管理员模式下打开 “Developer Command Prompt for VS2015", 是管理员模式啊! 然后进入 cd c: ...

  4. 执行Hadoop job提示SequenceFile doesn't work with GzipCodec without native-hadoop code的解决过程记录

    参照Hadoop.The.Definitive.Guide.4th的例子,执行SortDataPreprocessor作业时失败,输出的错误信息 SequenceFile doesn't work w ...

  5. java归并排序，单线程vs多线程

    一.什么是归并排序 归并排序又称合并排序,它是成功应用分治技术的一个完美例子.对于一个需要排序的数组A[0..n-1],归并排序把它一分为二:A[0..n/2-1]和A[n/2..n-1],并对每个子 ...

  6. 转：图解Git[强烈推荐]

    https://my.oschina.net/xdev/blog/114383 再次感谢原著作者和中文翻译者. 此页图解git中的最常用命令.如果你稍微理解git的工作原理,这篇文章能够让你理解的更透 ...

  7. mysql 5.6.34 二进制

    安装方法 http://dev.mysql.com/doc/refman/5.6/en/binary-installation.html shell> groupadd mysqlshell&g ...

  8. .net(C#)在vs2010版本下的MVC如何才能运行静态页面（html）

    正如,我上篇写的那样,那是在测试下,我所实现的方法,但是作为WEB项目,终究要发布的,故我把发布和切换在这说一下. 据我实测,我在按照我上篇改了Views下的Webconfig文件后,在解决方案下建了 ...

  9. SPSS数据分析—二分类Logistic回归模型

    对于分类变量,我们知道通常使用卡方检验,但卡方检验仅能分析因素的作用,无法继续分析其作用大小和方向,并且当因素水平过多时,单元格被划分的越来越细,频数有可能为0,导致结果不准确,最重要的是卡方检验不能 ...

  10. angularJS问题集结

    1.用ng-repeat循环输出遇到很奇怪的问题 : Error: [ngRepeat:dupes] http://errors.angularjs.org/1.4.6/ngRepeat/dupes? ...