Change class and show div smoothly

Good example to see how JQery3 is better then jQuery2

by Eugene Manager

HTML

<div class="b">block1 display:block</div>
<div id='f' >block2 display:(up to user)</div> 
<div class="i">block3 display:inline-block</div> 
<br>
<a href="#" class="toggle_b">toggle as block</a><br>
<a href="#" class="toggle_i">toggle as inline</a><br>
<a href="#" class="toggle_h">hide</a><br>

CSS

.b{
    display:block;
    background:antiquewhite;
}

.i{
    display:inline-block;
    background:darkgray;
}

JavaScript

$("#f").hide();

$(".toggle_h").bind("click", function(){    
    $("#f").removeClass().hide();
})

$(".toggle_b").bind("click", function(){    
    $("#f")    
    .removeClass()
    .addClass('b')
    .toggle(500);
    return false;
})

$(".toggle_i").bind("click", function(){    
    $("#f")    
    .removeClass()
    .addClass('i')
    .toggle(500);
    return false;
})