1

Can you please take a look at This Demo and let me know how I can add Animation / Speed or Duration to the following code 

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

});

using this 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 already tried something like 

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

});

but it didn't work!

Suffii
  • 5,694
  • 15
  • 55
  • 92

1 Answers1

-1

I think you really need to look into jQuery animate() and see how it works. It is a very simple function to use, and I find myself using it over and over again.

You can edit CSS directly. Try viewing and testing out some of the examples they have on their site.

Fizzix
  • 23,679
  • 38
  • 110
  • 176
  • Do a quick Google search for `CSS3 Animations`. They are extremely fast, and require less loading time than jQuery. Once you get the hang of them, they are super easy, and faster to write than jQuery :) – Fizzix Jun 25 '14 at 00:32
  • DOWNVOTER - Mind stating why...? – Fizzix Jun 25 '14 at 00:45
  • @Suffii - Don't worry mate, still trying to work on a solution haha – Fizzix Jun 25 '14 at 00:46