Show different image on hover

Show different image on hover

Dear JQuery peeps,

I'm having some trouble with the following construction. I have a worldmap image with an image map where you can hover over a few countries. When you hover over a country a pane will slide down and show an image about the country.

Now this is all working well except for the following.

When you hover over a country and quickly hover over another the pane will slide back up and after the slide it will slide back down. All well except for the problem that the image change will start while the pane is sliding back up and not after it!

Here's the code.

  1.                 $(".TulipMap").hover(
  2.                     function () {
  3.                         mapname = "#d" + $(this).attr("ID");
  4.                         newimage = "url('" + $(mapname).attr("src") + "')";
  5.                         $("#slider").css({'background' : newimage});
  6.                         $("#slider").slideDown(500);
  7.                     },
  8.                     function () {
  9.                         $('#slider').slideUp(500);
  10.                     }
  11.                 );
And this is part of my image mapping.

  1.         <MAP NAME="tulippicture">
  2.             <AREA SHAPE="circle" COORDS="147,300,10" HREF="#" ALT="North-America" ID="map_usa" CLASS="TulipMap">
  3.         </MAP>

Also I have the images already loaded so line # 4 references those images.

Can someone please help me to fix this? I've tried many things but none could solve this problem.