如何持續動畫盒子？

Question

我有兩個關於jquery的問題：

首先，如何製作一個移動到右側 - >底部 - >左側 - >頂部 - >右側....的框？

當DIV容器鼠標懸停時，箱子有被隱藏...

這裏是我的源：

$(".container").ready(function(){ 
    $(".box").animate({left:"100px"}, "slow") 
      .animate({top:"100px"}, "slow") 
      .animate({left:0},"slow") 
      .animate({top:0}, "slow"); 

});​ 

http://jsfiddle.net/TTstW

Answer 1

http://jsfiddle.net/TTstW/1/

(function loop(){ 
    $(".box").animate({left:"100px"}, "slow") 
      .animate({top:"100px"}, "slow") 
      .animate({left:0},"slow") 
      .animate({top:0}, "slow", loop); 

})(); 

你可以隱藏與CSS懸停框：

.container:hover .box{ 
    display:none; 
} 

http://jsfiddle.net/TTstW/2/