Как предотвратить эффект мигания в меню анимации

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 () , чтобы упростить скрытие и отображение меню.

Удачи!