Hi there,
If you go to the site above and click "The Course" tab you'll see a scale toggle with the thumbnails.
I want to know how to do that solidly.
A) I tried all day yesterday to do it with this function:
$(document).ready(function(){ $(".hole").hide(); $(".course_thumbs").hover(function(){ $(this).find(".hole").toggle("scale"{}1000); return false; }); });
With HTML:
<div class="course_thumbs"> <img src="images/course/thumbs/hole_th_01.jpg" class="hole"/> <img src="images/course/overlays/hole_ov_01.jpg" class="hole_title"/> </div>
Toggles back and forth fine, but eventually...
1) When the mouse leaves sometimes it doesn't toggle back to the original image "Hole 1 at..." or it toggles the initial image under the second.
2) Sometimes two thumbnails toggle at once.
I think what I'm missing is a line that basically says "don't toggle until all other toggles are finished" and "go back to .holetitle on mouseleave."
My testing server for full code:
I took the scale argument out so I can have my sanity back, but I want to beat these FLASH guys!!!
Thanks for any help or suggestions.