Grow your CSS skills. Land your dream job.

Fadein effects works only on 2nd hover.

  • # October 5, 2009 at 8:03 am

    SO i finally got my menu working. Works good in all browser except Firefox 3 (suprised?)
    problem is: On page load, my 1st mouse hover will not have the fadein effects(only the default instant appear) , it is only on my 2nd attempt onwards that the fadein works.

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




    # October 5, 2009 at 7:43 pm

    try adding in some code that starts the animation in the stopped part. So something like this

    Code:
    $(document).ready(function() {
    $(‘ul.menu li’).hover(function() { //Hover over event on list item
    $(this).find(‘ul’).hide();//start the animation here
    $(this).find(‘ul’).fadeIn(‘fast’); //Show the subnav
    } , function() { //on hover out…
    $(this).find(‘ul’).hide(); //Hide the subnav
    });
    });

    You might need to edit your css. maybe set the css to hide the nav and then the jquery to show it instead of hide it in my code above. I think the point is that you need to tell the jquery where to start. It might think the nav is hidden to start with and that’s why it’s not doing what you want

    # October 5, 2009 at 9:56 pm

    Hello your solution works

    although i still have display:none is my css, i added a

    $(document).ready(function() {
    $(‘ul.menu li’).hover(function() { //Hover over event on list item
    $(this).find(‘ul’).hide();
    $(this).find(‘ul’).fadeIn(‘fast’); //Show the subnav
    } , function() { //on hover out…
    $(this).find(‘ul’).hide(); //Hide the subnav
    });
    });

    Is there anyway to make it not hide so fast when my hover is out?
    I know there is this hoverintent plugin but i’m trying not to use any plugin if i can add a simple line to make it happen.

    # October 5, 2009 at 10:37 pm

    It would help if you posted a link to your site and explain in more detail what you want

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".