Or, don't use hover. If you make the users click the link instead of just
hovering over the link, then you basically have a toggle. (there is a
.toggle() method as well for this sort of thing...)
Or you can use a timer. When the hover ends, start a timer. Then clear/reset
that timer if the mouse moves over the revealed area or the original link. If
the timer is allowed to end, then do the usual fade() bit. The length of time
for this is up to you... 500 ms, 1 sec, etc... The hoverIntent plugin might
help out with this.
Some thoughts.
Shawn
On Friday 31 October 2008 03:57:13 searly wrote:
> Hmm ... i think i have tried this before. here is a problem though i
> encounter, not sure if i will encounter this again:
>
> The link is wrapping an image (larger then #myContainer), then when
> hovering over the image the #myContainer fades in as expected
> overlaying the image, containing a number of links / text. However now
> if i hover over #myContainer to click on one of the links the
> #myContainer fades out and i can't click on the links. I guess i could
> work round this by doing this:
>
> <a id="myLink">
> <img ... />
> <div id="myContainer"> ... </div>
> </a>
>
> ... so wrap the div within the link? not sure if this would work, also
> it somehow doesn't look great ...
>
> thanks
> Andi
>
> On Oct 30, 11:22 pm, Shawn <[EMAIL PROTECTED]> wrote:
> > Off the top of my head, and without looking at the site in question
> > (sorry, a bit pinched for time...)
> >
> > Build your HTML. Use CSS to position things where you want. For
> > example, a DIV with an absolute position. Then when you are happy with
> > the positionin/layout, set the container to display: none. Give that div
> > (or container) an ID. Now you can do something like this:
> >
> > $(document).ready( function () {
> > $("#myLink").hover(
> > function () { $("#myContainer").fadeIn(); },
> > function () { $("#myContainer").fadeOut(); }
> > );
> >
> > });
> >
> > I may have the .hover event wrong (docs aren't loading for me right this
> > moment...) But this should get you started. You may be able to use
> > the .toggle() method as well - up to you.
> >
> > Btw, simple fading requires no additional plugins.
> >
> > HTH
> >
> > Shawn
> >
> > On Thursday 30 October 2008 16:37:47 searly wrote:
> > > Hi there,
> > >
> > > sorry if this is the wrong place to post this, I am fairly new to
> > > jQuery and wonder if somebody could help me.
> > >
> > > On the front page of the JQuery website are three links
> > >
> > > 1. Lightweight Foot Print
> > > 2. CSS3 Compliant
> > > 3. Cross-browser
> > >
> > > When hovering over the links an area fades in (transparent) and when
> > > leaving the area the area fades out again. The area seems to contain
> > > paragraphs etc.
> > >
> > > I wonder if somebody knows with which plugin this was achieved, as i
> > > want to do sth. similar whereby an area with a number of further links
> > > fades in.
> > >
> > > Thank you very much
