jQuery的万能动画函数

来源：互联网发布：tv007网络电视手机版编辑：程序博客网时间：2024/05/22 12:58

<!DOCTYPE html><html><head> <title> new document </title> <meta charset="utf-8"> <style>  img{position:absolute} </style></head><body><h1>练习：jQuery万能动画函数</h1><img src="img/1.jpg"><img src="img/2.jpg"><img src="img/3.jpg"><img src="img/4.jpg"><script src="js/jquery-1.11.3.js"></script><script> //找到所有img中第1个设置其left为0 //找到所有img中第2个设置其left为200px //找到所有img中第3个设置其left为400px //找到所有img中第4个设置其left为600px $("img").each(function(i){  $(this).css("left",i*200) }).click(function(){//为所有img绑定单击事件  //对当前img启动动画:   //width->400,height->300,opacity->0  //2s  //线性  //动画结束: 移除当前img  $(this).animate(          {width:400,height:300,opacity:0},          2000,          "linear",          function(){//this->当前正在执行操作的对象           $(this).remove();          }  ); });</script></body></html>

0 0