title: how can I run two different jquery functions in sequence?
body: <p>I would like to make an effect of swiping images using jQuery.
  When I click an image, I want to 1) make the frame width to zero, 2) change to another image, and 3) make the frame width to 100% again. I used the following code, and whatever I do, the image changes first before the frame expands back to 100% (1-> 3-> 2). I tried use callback function, but could not figure it out. Any advice please?</p>
  
  <pre><code>$("#frame img").click(function(){
      $("#frame").animate({width:"0%", height:"100%"}, "slow"); //1
      $("#frame img").attr({src:"images2.png"}); //2
      $("#frame").animate({width:"100%", height:"100%"}, "slow"); //3
  });
  </code></pre>
  
  <p>The following is what I have tried with callback function (and I think it's completely wrong):</p>
  
  <pre><code>$("#frame img").click(function(){
      $("#frame").animate(({width:"0%", height:"100%"}, "slow"), function(){
           $("#frame img").attr(({src:"images2.png"}), function(){
                $("#frame").animate({width:"100%", height:"100%"}, "slow");
                });
           )};
  });
  </code></pre>