<!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( {400,height:300,opacity:0}, 2000, "linear", function(){//this->当前正在执行操作的对象 $(this).remove(); } ); }); </script> </body> </html>