jQuery基础的动画里面的回调函数 

<style>
        *{margin:0; padding:0;}
        #target{
            border-radius:10px;
            background:#eee;
        }
        .fade{/*动画起始状态*/
            height:104px; width:970px; opacity:1;
            padding: 10px; 
            border: 1px solid #aaa; 
      overflow:hidden;
        }
        .out{/*动画结束状态*/
      
        }
    </style>
 </head>
 <body>
    <h1>jQuery动画函数——显示隐藏动画</h1>
    <button id="btn1">显示/隐藏div</button>
    <div id="target">
        <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore debitis animi sint iste sequi sunt ad excepturi error labore molestiae est expedita eos nisi placeat provident dolorem quos facilis! Sapiente!</span><span>Accusamus neque id reprehenderit! Voluptatem in deleniti laboriosam commodi facere magnam impedit minima corrupti distinctio culpa amet optio natus esse. Inventore incidunt ab id perspiciatis atque minus magnam tempore harum.</span></p>
    </div>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
        $("#btn1").click(function(){
            //这个this代表btn1
        console.log($(this));
            $("#target").animate({
                    opacity:0
                },2000,function(){
　　　　　　　　　　　　//回调函数，在动画执行完后执行的代码
                    //这个this代表target
                console.log($(this));
                $(this).hide();
                });
                $("#target").click(function(){
                    alert("疼");
            })
        //.toggle(3000)
        //.slideToggle(3000)
        //.fadeToggle(3000)
        //为动画函数添加回调函数，输出"动画结束"
        });
    </script>
 </body>

 

posted @ 2018-04-10 18:19  虎太郎的小肚腩  阅读(310)  评论(0)    收藏  举报