2013年6月14日 星期五

jQuery 循環動畫

先寫一段會回到原點的動畫,再讓他每隔一段時間就執行一次就好了。

這邊用css畫一個方塊,然後設position=relative,就可以用css的top或right等位置的參數去控制他的位置了。

基本動畫
  1. function boxJump(){   
  2.     $("#box").animate({top:"-10px"},100).animate({top:"0px"},100);   
  3. }  

再加一點東西,這樣就可以做循環動畫了
  1. function boxJump(){   
  2.     $("#box").animate({top:"-10px"},100).animate({top:"0px"},100);   
  3.     setTimeout(boxJump,3000);   
  4. }   
  5. boxJump();  

Demo

反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...