如何防止菜单动画中的闪烁效果

时间:2011-11-14 16:57:47

标签: jquery animation

我有一个具有不良闪烁效果的下拉菜单。在页面顶部,我隐藏了菜单,以便稍后使用下滚效果为其设置动画。问题是隐藏的速度不够快。这会导致所有下滚菜单在隐藏之前闪烁。解决这个问题的方法是什么?

在HTML页面的顶部,我可以隐藏菜单。

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

我在onclick事件中为导航中的菜单项打开下滚菜单。

// 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;
}

该动画具有正确的效果。我要解决的是闪烁。我不想在动画之前显示菜单。如果我将它们隐藏在CSS中。然后,我必须继续切换显示信息。

#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;
}

如何在不闪烁的情况下创建下滚?

1 个答案:

答案 0 :(得分:0)

您不需要将持续时间参数传递给jQuery的$.hide()方法,您只需执行以下操作即可立即隐藏div:

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

我还建议您查看jQuery的$.slideToggle()方法,以简化菜单的隐藏和显示。

祝你好运!