PDA

View Full Version : Adding a Short Delay before Triggering MouseOver Event



FrankieL
02-10-2012, 04:11 PM
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
02-11-2012, 09:18 PM
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
02-11-2012, 10:10 PM
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
02-11-2012, 10:30 PM
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
02-11-2012, 10:42 PM
Thank you for replying. I hope it is possible.

here is the link:

XManBG
02-12-2012, 12:00 AM
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
02-12-2012, 09:58 AM
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
02-12-2012, 03:51 PM
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
02-12-2012, 04:58 PM
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
02-12-2012, 07:11 PM
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);
});
});

FrankieL
02-12-2012, 08:12 PM
I love it. I love it! Fade in, Fade out AND delay. It is perfect. You have made my day. Thank you again XManBG.
:)