I'm having difficulty creating a simple animation using JQuery .animate

I want to move a small div from left to right and back again, but at the same time I want it to bob up and down as if it was floating.

I'm using vanilla jquery and the jquery.timers plugin.

My question really is, how can I get one .animate to work independently of the other.

here is my code.

2.  $(document).ready(function(){
3.  
4. 
   
5.  $("#dress").everyTime(1, function(){  
6. $("#dress").animate({left:"700px"}, 11000).animate({left:"0"}, 11000);
7.  });
10.  $("#dress").everyTime(1, function(){  
11. $("#dress").animate({top:"30px"}, 1000).animate({top:"0"}, 1000);
12.  });
14.  
15.   });

What happens is .dress moves from left to right, then bobs up and then down, then repeats, I'd like it to bob up and down whilst moving left to right.

Sorry if it's been asked before.

Chris.