Question

I have a rolldown menu that has an undesirable flashing effect. At the top of the page I hide the menu to animate it later with a roll down effect. The problem is that the hiding isn’t done fast enough. This causes all the roll down menus to flash before being hidden. What is the way to fix that?

At the top of the HTML page I have this to hide the menus.

<script type="text/javascript">
$(function(){
  $("#navigation li div").hide(1);
});
</script>

I open roll down menus in the onclick event for a menu item in the navigation.

// open hidden layer
function mopen(id)
{   
    var tableft = $("#navigation li:hover").offset().left;
    var menuwidth = $("#navigation li:hover").width() - 2;
    $('#'+id).css('width',menuwidth);
    $('.tabtop').css('left',tableft);
    $('.tabtop').css('width',menuwidth+2);
    $('.tabtop').css('visibility','visible');

    // cancel close timer
    mcancelclosetime();

    // close old layer
    if ( oldid != "") { 
       $('#'+oldid).stop(true, true).animate({'height': 'hide'}, 400);
    }

    // get new layer and show it
    $('#'+id).stop(true, true).animate({'height': 'show'}, 400);
    oldid = id;
}

That animation has the right effect. What I want to fix is the flashing. I don’t want the menus to show at all before the animation. If I hide them in the CSS. Then, I’d have to keep toggling the display information.

#navigation li div {
    position: relative;
    display: inline-block;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    padding-top: 0px;
    padding-bottom: 0px;
    background: #EAEBD8;
    border: 1px solid #990000;
    z-index: 99999;
}

How do I create the roll down without the flashing?

Answer 1

You don’t need to pass a duration argument to jQuery’s $.hide() method, you can simply do the following to hide the divs without a delay:

$(function(){
  $("#navigation li div").hide();
});

I would also suggest you look at jQuery’s $.slideToggle() method to simplify the hiding and display of the menus.

Good luck!