Forums

jhallmusic

Hi.. I'm trying to tie up some loose ends on a site I'm developing, and I'm using a bit of jQuery to pop up some images. You can see the example here:

http://www.campcreekrecords.com/pci/services.aspx

When you hover over one of the services with a red marker, an image will popup showing the service. My problem is that sometimes when you hover over an object, the animation fires twice, making the image flash one time then come back again and stay on. Also, if you hover over an object several times really quickly, the animation is done over and over again (as many times as the object was hovered over). I've tried messing around with stopping that animation (using an if statement and the .stop() function), but just haven't been able to get it working right. Any jQueryasts out there with the solution? (Thanks!)

Joe

cybershot

When posting a question about code, any code. it is a very good idea to post the code that you are using so that someone who may beable to help you can just add the correct command or atleast read you code to see if there is a mistake that you made that is causing the error.

jhallmusic

yeah, sorry... I guess I was assuming everyone just uses firebug now...

the jQuery:


$(document).ready(function() { 
		$(\"img.servicesImage\").hide();
		$(\"span.reveal\").hover(function(){
			$(this).parents(\"li\").children(\"img.servicesImage\").fadeIn(500);
		}, function () {
        $(this).parents(\"li\").children(\"img.servicesImage\").fadeOut(100);
      });
	});

the html:


<li class=\"reveal\"><span class=\"reveal\">Generator installation, servicing, and sound deadening</span>
					<img class=\"servicesImage\" src=\"images/generator_TEMP.jpg\" alt=\"\"/>
</li>

don't think the css is necessary... course you could always firebug it... :)

treehouse : what would you like to learn today?

Forums

jQuery question