練習5:<br>JQ動畫小練習

JQ練習五:動畫小練習

(一)Animate練習

  <div id="div1">div1</div>
  <div id="div2">div2</div>
  <style>
    div{width:80px; height:80px; background:#506AEC;
      position:absolute; left:0;}
    #div1{top:50px; background:#9BF4E0;}
    #div2{top:150px; background:#FBC98B;}
  </style>

animate參考連結1animate參考連結2

Easing函數速查表 jQuery Easing Plugin

結果1結果2

    $('#div1').animate({left:800}, 1000,'easeOutBounce')
              .animate({top:500},1000,'easeOutQuint');

    $('#div2').animate({left:800,top:500}, 1000);

結果

    var $left = $(document).width()-$('div').width();
    var $top = $(document).height()-$('div').height();

    $('#div1').animate({left:800}, 1000,'easeOutBounce')
              .animate({top:500},1000,'easeOutQuint',function(){
                    $('#div2').animate({left:800,top:500}, 1000);
              });

調整之,說明 function中的callback

    var $left = $(document).width()-$('div').width();
    var $top = $(document).height()-$('div').height();

    $('#div1').animate({left:$left}, 1000,'easeOutBounce')
              .animate({top:$top},1000,'easeOutQuint',function(){
                $('#div2').animate({left:$left,top:$top}, 1000,function(){
                  $('#div1').fadeOut();
                  $(this).animate({left:$left/2,top:$top/2},1000,function(){
                    $(this).animate({width:300,height:300,left:'-=150',top:'-=150'},1000,function(){
                      setTimeout(function(){$('#div2').fadeOut()},3000);
                    });
                  });
                });
              });