How to ‘setTimeout’ function to javascript

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:

[code]<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>[/code]

and this is the bit if html it effects:

[code]
<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>
[/code]

Any help will be very much appreciated..

Also in #JavaScript _↴