我如何使用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()功能。这是手册

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');
}

您应该这样做。首先在1000ms中隐藏侧边栏，然后开始在1000ms中显示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');
    }