Question

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

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

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

Answer 1

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

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

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

祝你好运！

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

1 个答案: