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 jquery.animate-enhanced.js for hardware accelerated animations.
Any Idea about how can I fix it?

Answer 1

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 2

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 3

I am guessing you want to toggle between two classes. If that is the case you can do it with toggleClass function.

 //first you start with one of the classes in html:
    <div class="foo"></div>
    //then in js you do:
    var element = ...;
    $(element).toggleClass('foo bar');

This will toggle both 'foo' and 'bar'. Since foo is already present it will remove it and add bar. On the next call bar will be present so i will remove it and add foo. And so on.

If something is not clear here is a jsfiddle example: https://jsfiddle.net/09qs86kr/1/

Answer 4

$(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 5

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>

Answer 6

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 7

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.