Adding a Short Delay before Triggering MouseOver Event

[FrankieL]

Hello,
Hello, Could anyone help please?
Problem: I would like to create a mouseover delay, to delay the image appearing when the list item is moused over, (by say 500 milliseconds).
Here is the javascript code that I have:

<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").click(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 HTML bit:

<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>

If you need more info please let me know. My knowledge of javascript is zero.
Any help will be very much appreciated..

[XManBG]

Hello,

why not using the standard setTimeout() function of JavaScript??
You have to put your code for what-should-happen-after-onmouseover into the brackets.

Cheers

[FrankieL]

Hi, Thank you for your help but I do not know how to write javascript. The only way this is going to work is if you actually type that bit of code into the code that I have provided.Is this possible?

[XManBG]

This is not easy possible using only the code of you posted inhere. Better would be to post a link to the page, where you would like to use the asked delay.

[FrankieL]

Thank you for replying. I hope it is possible.

here is the link:

[XManBG]

OK, let's say you have that code, which I've copied out of your site:

<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>

Now to make the pictures come out with 500ms delay, you have to change it like this:

<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() {
    var intPictureDelay;
    clearTimeout(intPictureDelay);
    intPictureDelay = 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);
  });
});
</script>

And something else: I would use following script line for including jQuery, instead of your local older version 1.4.2. Or just download the latest version to your site from the jQuery site.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

And a tip: why not using standard jQuery functions fadeIn() and fadeOut(), which make the showing and hiding of elements more smoother and nicer (on my opinion)... and you will not need that delay.

Cheers

[FrankieL]

Thank you so much for your help XManBG.
I downloaded the latest version of JQuery, all wel. Then I copied your code in, and then the images stopped showing. Oh dear. Can't see where I have gone wrong with your two well explained instructions. I have uploaded the changes for you to see.

The jQuery functions fadeIn() and fadeOut() sounds great. I Googled it, tried working it out, multiple times but just can't get it to work. I think learning javascript is going to take time. Would you be kind enough to also show me what the code is for fadeIn() and fadeOut() ?
I really do appreciate your help. Can't thank you enough.
Regards
Françoise

[XManBG]

No problem, the fadeIn-fadeOut solution is even easier:

$(document).ready(function() {
  $(".infoPanel li a img").hide();
  $(".infoPanel li a").eq(0).addClass("current");
  $("a.current").next().stop(true,true).fadeIn("slow");
  $(".infoPanel li a.current img").stop(true,true).fadeIn("slow");
  $(".infoLink").mouseover(function() {
	  if (!$(this).hasClass("current")) {
		$("a.current").next().stop(true,true).fadeOut("slow");
		$(".infoPanel li a.current img").stop(true,true).fadeOut("slow");
		$("a.current").removeClass("current");
		$(this).addClass("current");
		$("a.current").next().stop(true,true).fadeIn("slow");
		$(".infoPanel li a.current img").stop(true,true).fadeIn("slow");
	  }
  });
});

[FrankieL]

That works. Fantastic! Thank you very much.
Would it be possible to still add the delay on mouseover so that the images don't appear as you run your mouse accross the list?

For example, see - http://whitecube.com/artists/

If you could send me the code for that too that would be a cherry on the cake. I really do appreciate your wonderful help. Thank you.

[XManBG]

Francoise, you should start with your example. Our conversation is a good example of how different and subjective could be the point of view of every person. Here you have the code, which I think comes very close to what you're looking for Enjoy!!

$(document).ready(function() {
	$(".infoPanel li a img").hide();
	$(".infoPanel li a").eq(0).addClass("current");
	$("a.current").next().stop(true,true).fadeIn("slow");
	$(".infoPanel li a.current img").stop(true,true).fadeIn("slow");

	var intPictureDelay;
	$(".infoLink").mouseenter(function() {
		var what = $(this);
		clearTimeout(intPictureDelay);
		intPictureDelay = setTimeout(function(){
			if (!what.hasClass("current")) {
				$("a.current").next().stop(true,true).fadeOut("slow",function(){
					$("a.current").removeClass("current");
					what.addClass("current");
					$("a.current").next().stop(true,true).fadeIn("slow");
				});
			}
		},1000);
	});
	$(".infoLink").mouseleave(function(){
		clearTimeout(intPictureDelay);
	});
});