javascript sliding div left/right

Question

Hy guys! I want to make a slide toggle effect of a div. Below is the code in my html file. My div is 500px wide by 50px height. I want to make it slide left/right over the screen when pressed on the first image inside the div. This is a toolbox that contains a couple of icons inside. The first image at the left - left.jpg should be a swop image(some kind of button - this is an arrow pointing left and after moving the div this arrow should point right - I mean the picture should be changed). I looked over the web and saw different examples with jQuery but could not find the exact solution for my needs. I know this is a great community and hope that somebody will help to deal with this! Thank you in advance!!!

<script> 
$(function(){
$("#clicky").click(function(){
    $("#slide").animate({marginLeft:'500px'},'slow');   
});
});
</script>
<div id="slide">
<img  id="clicky" src="left.jpg" width="15" height="15" />
Div Content here...</div>    

Answer 1

As a third argument you could pass a function that will be fired when the animation is finished. Something like this:

$("#slide").animate({marginLeft:'500px'},'slow', function(){
  $("img#clicky").attr("src", "right.jpg");
});