Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Simple, but not so simple it seems….

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #29317
    Luminated
    Member

    I’m trying to get my navbar fade in and fade out. I got the fade in working great, but I can’t figure out how to have it gracefully fade out when the mouse leaves the nav area or moves to the next nav item. Any help?

    http://www.econesthomes.com/

    jQuery:

    Code:

    The HTML is quite beefy and its just a two tiered navigation using nested UL’s, so best to probably just view source or use Firebug.

    #77544
    Luminated
    Member

    Thank you…that did work as far as the effect went, but for some reason the fadeIn and fadeOut function causes the ‘ul.children’ to act very strangely. When the mouse leaves, the sub links become styled like the top level links and I get an odd horizontal scroll bar across the page, which tells me something is expanding the page somehow! Very odd.

    #77597
    noahgelman
    Participant

    Should probably throw a .stop() in as well

    Code:
    #77659
    Luminated
    Member

    We’re getting close! But now the submenu simply fades in and out without staying. I setup a test page:

    http://www.econesthomes.com/wp-content/ … t-nav.html

    Thanks for the help so far guys, this is enlightening! :)

    #77664
    Luminated
    Member

    Yes yes, almost there! I figured that out actually shortly after I posted this. The only last little hangup is Google Chrome and IE (of course) cause some crazy issues. When the mouse leaves the nav, the sub links inherit the styling of the top level links. In IE in particular, the sublinks never dissapear, they just stay visible. :(

    #77666
    noahgelman
    Participant

    IE has some opacity issues, and perhaps chrome does as well. How does this work?

    Code:
    #77672
    Luminated
    Member

    Still no cigar…also getting that strange styling issue in Firefox too…

    http://www.econesthomes.com/wp-content/ … t-nav.html

    #77698
    Luminated
    Member

    I totally agree, but I can’t get this to work right even in Firefox and Chrome. :/ Closest I came is this:

    http://www.econesthomes.com/

    It doesn’t fade out, which is fine and in some ways is even a nice balance, but it doesn’t degrade at all if you have Javascript turned off, which concerns me, although I think in some ways is more ridiculous than using IE6. But it works.

    It could be my CSS, but I don’t understand why the styling issues occur only when I use fadeIn and fadeOut/fadeTo.

    I know its possible and maybe simple, but not as I originally thought, hence the topic title. :)

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.