jQuery自定义动画

            $(function(){
                $(".btn1").click(function(){
                    $(".box1").animate({'left':'100px','width':'100','opacity':'toggle'});
                });
                $(".btn2").click(function(){
                    $(".box1").animate({"left":"0px",'width':'200','opacity':'toggle'});
                });
                $(".btn3").click(function(){
                    $('.box1').animate({'top':'+=200px','opacity':'0.5'},function(){
                        alert("s");
                    })
                });
                $(".btn4").click(function(){
                    $('.box1').animate({'opacity':'0.5','top':'+=200px'},{
                          
                          step:function(now,fx){
                                  $('div').css('left',now);
                                  console.log(now);
                              }
                    })
                        
                });
            });

动画队列：

queue()表示对象已经存在的函数队列；

queue(callback(next))

　　queue()方法可以接受一个回调函数作为参数，表示将要添加到队列中的新函数，类似回调函数，但是不需要在事件发生时绑定，队列执行完函数后，队列后面的动画效果被停止，这时就需要用到dequeue()

clearQueue()

　　与deQueue()方法相反，clearQueue()方法用来从列队中移除所有未执行的项

　　[注意]clearQueue()并不影响当前动画效果