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

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

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 4

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/