我如何使用jQuery效果

Question

如何在此代码中使用jQuery效果？隐藏网站菜单的按钮的代码并展开屏幕工作区的中间我想要用效果慢慢完成这项工作..

function woow_HIDE(){
    document.getElementById('sidebar').style.display='none';
    document.getElementById('himenu').style. display='block';
    $('#mainbar').removeClass('col-lg-10 col-md-10');
    $('#mainbar').addClass('col-lg-12 col-md-12');

}

Answer 1

使用jQuery提供的fadeOut()函数。这是manual

function woow_HIDE() {
    $('#sidebar').fadeOut();
    $('#himenu').fadeIn();
    $('#mainbar').removeClass('col-lg-10 col-md-10');
    $('#mainbar').addClass('col-lg-12 col-md-12');
}

Answer 2

function woow_HIDE(){
   $('#sidebar').hide(1000, function(){
       $('#himenu').show(1000);
   });
   $('#mainbar').removeClass('col-lg-10 col-md-10');
   $('#mainbar').addClass('col-lg-12 col-md-12');
}

你应该这样做。首先隐藏侧栏在1000毫秒然后开始在1000毫秒显示himenu

Answer 3

You can use this fadeOut effect with time , set the time as per your requirment.

 function woow_HIDE() {
        $('#sidebar').fadeOut(1000);
        $('#himenu').fadeOut(1000);
        $('#mainbar').removeClass('col-lg-10 col-md-10');
        $('#mainbar').addClass('col-lg-12 col-md-12');
    }