javascript - Issue on Adding Animation to jQuery toggleClass() -

javascript - Issue on Adding Animation to jQuery toggleClass() -

can please take @ this demo , allow me know how can add together animation / speed or duration next code

$("#ecolomodel").on("click",function(){ $("#ecolomodelno").toggleclass("switchshow switchhiden"); $("#ecolomodelyes").toggleclass("switchhiden switchshow"); });

using mark up

<div class="panel panel-default"> <div class="panel-heading">switch</div> <div class="panel-body"> <div class="row"> <div class="switch col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-10 col-md-10 col-sm-10 col-xs-10"> <button id="ecolomodelno" class="btn btn-primary switchshow norightradius col-lg-1 col-md-1 col-sm-2 col-xs-3">no</button> <button id="ecolomodel" class="btn btn-primary noradius col-lg-11 col-md-11 col-sm-8 col-xs-9">new model</button> <button id="ecolomodelyes" class="btn btn-primary switchhiden noleftradius col-lg-1 col-md-1 col-sm-2 col-xs-3">yes</button> </div> </div> </div> </div>

i tried

$("#ecolomodel").on("click",function(){ $("#ecolomodelno").toggleclass("switchshow switchhiden", 6000); $("#ecolomodelyes").toggleclass("switchhiden switchshow", 6000); });

but didn't work!

i think need jquery animate() , see how works. simple function use, , find myself using on , on again.

you can edit css directly. seek viewing , testing out of examples have on site.

javascript jquery css3 jquery-animate css-animations