CODEWITHSUNDEEP
jquerycssanimationjquery-animate
Suffii
Suffii

Reputation: 5784

How to Use jquery Animate() with .slideToggle() Between Two Classes

I am trying to add some smoothness( Animation) to changing a div width by using this method

$("#changer").on("click",function(){
  $("#thediv").toggleClass("w-2 w-1");
});

CSS:

.w-1{height :200px witdh: 200px;}
.w-2{height :200px witdh: 300px;}

As you know I can toggle the classes but changing the size is happening very fast and causing like skipping all element at once. Now I need to use some efets like CSS3 or jQyery animation to toggling the classes smoothly. Can you pleae let me know how to do that?

I already tried this:

$("#changer").on("click",function(){
  $("#thediv").toggleClass(1000, "col-md-2 col-md-1");
});

to add some speed but it didn't woek

Upvotes: 1

Views: 950

Answers (2)

Ashima
Ashima

Reputation: 4824

Also, make sure you are using jquery UI and then use toggleClass with speed. Remember the first param is the class name and second param is speed so try this

$("#thediv").toggleClass("col-md-2 col-md-1", 1000);

instead of this - 

$("#thediv").toggleClass(1000, "col-md-2 col-md-1");

Aksom see this exmaple -- http://jsfiddle.net/yKFjA/1/

Upvotes: 1

Ashima
Ashima

Reputation: 4824

Without jQuery Ui effects you cannot have a speed on a toggle -- As Jay said; but you can do this ->

$("#changer").on("click",function(){
     $("#thediv").hide();
     $("#thediv").toggleClass("w-2 w-1");
     $('#thediv').fadeIn(1000);
});

Hope this helps!

Upvotes: 0

Related Questions