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


Tags: jquery,css3,animation,jquery-animate

Problem :

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



Solution :

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/


    CSS Howto..

    How to make pure css floating tooltips (absolutely positioned span) dynamically resize to accommodate text

    How to prevent cutting off absolute positioned elements and still keep a box-shadow embrace the parent div?

    How to align image as pseudo element?

    How i can optimize Performance in asp.NET MVC based web application

    How to put text on placeholder image

    JavaScript and SEO. How Should I reconcile them?

    How do I correctly position elements and lay out a page?

    How to apply different CSS styles to 2 elements with the same class name?

    How to apply same event to multiple buttons?

    How to have 100% width for last column only in html and css?

    How to implement CSS multi-level drop down menu with different classes?

    How to set the css style display property in json success function

    how to display php search engine execution time and number of results before the results

    How can I get a CSS class selector to override the input[readonly] selector?

    How to ease the whole css animation

    jQuery Cycle Plugin is showing border of auto-generated links

    How to handle the html and css of one side image and other side content and vice versa

    how do I get my background to stretch the entire page

    how to align the content to center of page using css

    How to set div width to the width of the table in it?

    How to format text in input box with css

    How do I align 2 divs (each has its own padding) next to each other?

    How to add colour classes to this css

    How do I take code from Codepen, and use it locally?

    How do I design a css gradient to look like the attached Facebook Login screen

    How can I hide with CSS only?

    How to add or create an illusion of movement to a fixed div?

    Changing a DIV to “position:fixed” then change it back to “static” and show the rest of DIVs

    How come my divs are jumping around during a transition?

    How to create straight line with same css gradient at both ends?