极速小乌龟

导航

jQuery-动画点击淡化消失 

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

 

posted on 2017-02-14 07:06  极速小乌龟  阅读(170)  评论(0)    收藏  举报