Question

I have two questions about jquery:

First, how to make a box that move to right -> bottom -> left -> top -> right…. repeatly?

And when mouse hover on div container, box has to be hidden…

here is my source:

$(".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);

 })();

You can hide the box on hover with CSS:

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

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