The hover method is your best bet. It might look like this based on your
example:

$("li > a").hover(function(){
        alert('mouse over');
},function(){
        alert('mouse out');
});




-----Original Message-----
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of JamesLov
Sent: Wednesday, November 19, 2008 3:09 PM
To: jQuery (English)
Subject: [jQuery] help with hover function


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


Reply via email to