jQuery UI switchClass() method is not working properly

Question

jQuery UI switchClass() method doesn\'t switch class, rather it performs some undesired animations and the class remains the same as the original one when I use

Answer 1

Make sure the classes you are using doesn't have any "!important" properties. I have invested and found that jquery UI switch class doesn't work for properties with "!important" tags.

Reason : Consider that your previous class had style "padding : 0" and your new class has "padding:100". You have added switchClass duration for 100 ms. What jquery will do for this is, it will add a style to your element by increasing padding by "1" in every 1 ms. But, as the previous class is still there in the element with a "padding : 0 !important", after 10 ms, "padding : 10" style added by jquery doesn't effect the UI. After 100 ms, jquery will execute removeClass("previousClass") and addClass("newClass"). this will result to a instant change in style reflected in the UI.

This is the explanation I find-out. Please let me know what you guys think about this.

Answer 2

$(function(){
   $('#circle').click(function(){
      $('.circle').switchClass('circle', 'square', 'slow');
      $('.square').switchClass('square', 'circle', 'slow');
      return: false
   });  
});

In this Example on the click of the #circle Div I am removing the .circle class from all objects and replacing it with the .square class. If the .circle class is not there to be removed then the .square class is removed and replaced with the .circle class. It is a toggle effect.

If you do no want the toggle just remove the top or bottom one.

Answer 3

I faced this problem before but could not find the solution. Then I used toggleClass() to solve the problem. Here is the example:

If an element has class X at the beginning, then write:

$(element).toggleClass("Y");

This will add class Y. If you do that again, it will remove class Y.

Reference: http://api.jquery.com/toggleclass/

Hope that helps.

Answer 4

I have encountered this problem before and wasted many hours trying to figure out what was going wrong.

I still don't know why switchClass sometimes doesn't work, but I do have a workaround:

Replace

switchClass('circle','square');

with

addClass('square').removeClass('circle');

Hope that helps.

Answer 5

if the prb is

.switchClass is not a function

check if you are link the effects.core.js in your code

check that by using the Console in your navigator for js, good luck it's work fine for me :)

Answer 6

please check you are added the jQueryUi file

<script type="text/javascript" src="https://code.jquery.com/ui/1.8.23/jquery-ui.min.js"></script>