Show on click

Show on click

I wrote a script that when a thumbnail is clicked that it will display an image in a separate div. It works but the problem is it switches the new image, fades and then reloads the new image. I want the old image to fade and the new one to fade in.

jquery
  2. $('#portfolioLeft a.thumb').click(function() {
  3. var thumbId = $(this).attr('id');
  5. $('#portfolioRight #portfolioMac img').fadeOut('slow');
  6. $('#portfolioRight #portfolioMac img').attr('src', 'img/port/lrg/' +thumbId+ '.jpg').fadeIn('slow');
  7. });
html
  2. <div id="portfolioLeft">
  3. <a class="thumb" href="javascript:void(0)" id="josephmanning"><img src="img/port/sml/josephmanning.jpg" border="0" alt="" /></a>
  4. <a class="thumb" href="javascript:void(0)" id="omm"><img src="img/port/sml/omm.jpg" border="0" alt="" /></a>
  5. <a class="thumb" href="javascript:void(0)" id="omm-dancer"><img src="img/port/sml/omm.jpg" border="0" alt="" /></a>
  6. </div>
  7. <div id="portfolioRight">
  8. <div id="portfolioMac">
  9. <div id="portfolioPadding">
  10. <img src="img/port/lrg/josephmanning.jpg" border="0" alt="" />
  11. </div>
  12. </div>
  13. </div>

Any help is appreciated.