How to 'setTimeout' function to javascript

[FrankieL]

Hello,
I would be very grateful for some help on adding 'setTimeout' function to javascript below. Need to create a delay (say 500 milliseconds) on images appearing when you mouseover the list of names. I have no .js knowledge.

This is the javascript as is:

<script type="text/javascript">
$(document).ready(function() {

$(".infoPanel li a img").hide();

$(".infoPanel li a").eq(0).addClass("current");
$("a.current").next().show();
$(".infoPanel li a.current img").show();

$(".infoLink").mouseover(function() {
   if (this.className.indexOf("current") == -1) {
       $("a.current").next().hide();
       $(".infoPanel li a.current img").hide();
       $("a.current").removeClass("current");
       $(this).addClass("current");
       $("a.current").next().show();
       $(".infoPanel li a.current img").show();
   }
});


});
</script>

and this is the bit if html it effects:

<ul class="infoPanel">
	<li><a class="infoLink" href="#url"><span>Paula Rego</span></a>
		<div class="img"><img src="assets/projects/P_Rego.jpg" alt="" />
		 <div class="text"><p>Publisher: Marlborough Gallery<br />
       <a href=" http://www.marlboroughgallery.com/galleries/graphics/artists/paula-rego/graphics" title="www.marlboroughgallery.com" target="_blank" rel="external">www.marlboroughgallery.com</a></p>
		</div></div>
	</li>
</ul>

Any help will be very much appreciated..

[acestuff]

Well the code is a bit of a mess 2bh but something along these lines will probably work:

$(".infoLink").mouseover(function() {
   window.setTimeout(
      function() {
         if (this.className.indexOf("current") == -1) {
             $("a.current").next().hide();
             $(".infoPanel li a.current img").hide();
             $("a.current").removeClass("current");
             $(this).addClass("current");
             $("a.current").next().show();
             $(".infoPanel li a.current img").show();
         }
    },
    500
});

(Not tested!)