JQuery UI switchClass () method not working correctly

Question

The jQuery UI switchClass() method does not switch the class, rather, it performs some unwanted animations, and the class remains the same as the original when I use jquery.animate-enhanced.js for hardware accelerated animations.
Any idea on how I can fix it?

Answer 1

I ran into this problem before and spent a lot of time trying to figure out what was going wrong.

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

Replace

 switchClass('circle','square'); 

from

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

Hope this helps.

Answer 2

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

In this example, when I click #circle Div, I remove the .circle class from all objects and replace it with the .square class. If the .circle class should not be removed, the .square class will be removed and replaced by the .circle class. This is a switching effect.

If you do not want the switch to simply delete the top or bottom.

Answer 3

if prb

.switchClass is not a function

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

check that using the console in your navigator for js, good luck this works fine for me :)

Answer 4

please check that you added the jQueryUi file

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

Answer 5

I ran into this problem before but couldn't find a solution. Then I used toggleClass () to solve the problem. Here is an example:

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

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

This will add class Y. If you do this again, it will delete class Y.

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

Hope this helps.

Answer 6

I assume you want to switch between the two classes. If so, you can do it with the 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 switch between "foo" and "bar". Since foo is already present, it will remove it and add a panel. The next call bar will be present, so I will remove it and add foo. And so on.

If something is unclear, here is a jsfiddle example: https://jsfiddle.net/09qs86kr/1/

Answer 7

Make sure the classes you use do not have any important !! Important properties. I embedded and found that the jQuery UI switch class does not work for properties with “important” tags.

Reason: Think that your previous class had the style "padding: 0" and your new class was "padding: 100". You added a switchClass duration of 100 ms. What jquery does for this is to add style to your element by increasing padding by "1" for every 1 ms. But, since the previous class is still present in the element with "padding: 0! Important", after 10 ms the style of "padding: 10" added by jquery does not affect the user interface. After 100 ms, jquery will execute removeClass ("previousClass") and addClass ("newClass"). this will instantly change the style reflected in the user interface.

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