How do I use jQuery effects

Question

How do I use jQuery effects in this Code ?? The code for a button that Hide the site menu And expand the middle of the screen workspace I want this work to be done with effects and slowly..

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

}

Possible duplicate of [Simple fade in fade out div with jquery on click](http://stackoverflow.com/questions/12584481/simple-fade-in-fade-out-div-with-jquery-on-click) — Liam, Feb 22 '17 at 10:13

motanelu · Accepted Answer · 2017-02-22T10:41:13.350

2

Use the fadeOut() function provided by jQuery. Here's the manual

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

edited Feb 22 '17 at 10:41

answered Feb 22 '17 at 10:10

motanelu

3,945
1
14
21

Also, you have to use `.fadeIn()` for `hipmenu` element. – Mihai Alexandru-Ionut Feb 22 '17 at 10:14

score 1 · Answer 2 · answered Feb 22 '17 at 10:11

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

You should do like this. First hide sidebar in 1000ms then start showing himenu in 1000ms

score 1 · Answer 3 · answered Feb 22 '17 at 10:41

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

How do I use jQuery effects

3 Answers3