Hi, I have been using jquery for several projects and I am very happy with how easy it is to use. I need some help with (I think) chaining functions, or using callbacks because I'm not sure I quite understand how to tell jquery to go like this:
mouseEnter -> do this -> stop -> do this Specifically I have a page that I am building that is setup with thumbnails of images. Please take a look here: http://jameslovinsky.com/couture/index.php When you mouseOver the thumbnail the main image and caption should fadeIn. When you mouseOver the next function I want the visible span to fadeOut, then the new span to fadeIn. Currently its set so that each span will fadeOut when the mouse leaves the thumbnail. This is how the HTML is setup (pseudocode): <li> <a background-image: url(thumbnail) > <span><img><caption></span> </a> </li> Its setup this way so it will degrade gracefully as IE6 doesn't allow :hover on anything other than a elements. Anyway, the jquery I tried to make this work the way I described above is (I tried mouseOver and hover functions as well): $("li > a") .bind("mouseenter", function(){ $("span").fadeOut(1000); $(this).find("span").css("visibility", "visible").fadeIn (1000); $(".center").children("img").hide (); } ); But then when you mouseOver the thumbnail the image will fade in and out in a loop until you move the mouse off. Can anyone suggest a way to either select and fade out any span that is not a descendant of $(this) li > a for the first part of the function, or a way to chain the functions so that the effect is select any visible spans -> fade them out -> stop -> select descendant span of $(this) -> fade it in Thank you in advance for any help you can give me. James Lovinsky
