Jquery UI Switchclass() Method Is Not Working Properly

jQuery UI switchClass() method is not working properly

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.

jQuery UI switchClass() not working perfectly

switchClass doesn't change the class until the animation finishes, so calling it again before half a second has elapsed will cause funny behaviour.

You should pre-select, store a current position, and use animate instead of swapping classes;

var p0 = $(".photo0");
var p1 = $(".photo1");
// etc
var i = 0;
var posn = [
    {x:50,y:50},
    {x:100,y:70},
    {x:150,y:80},
    {x:200,y:70},
    {x:250,y:50}
];
function movePhotos(){
    p0.animate( posn[i], 500 );
    p1.animate( posn[(i+1)%5], 500 );
    // etc
}
function scrollPhotosLeft(){
    i = (i + 1) % 5;
    movePhotos();
}
function scrollPhotosRight(){
    i = (i + 5 - 1) % 5;
    movePhotos();
}

jquery-ui switchClass() not working as expected

Are you sure you have jQueryUI loaded? The switchClass method isn't a part of jQuery. Your fiddle is throwing JS Console errors about it.

You don't really need JS for this. Just setting the :hover on the .iamatrainer and .iusetrainer elements works fine. http://jsfiddle.net/y3ALr/3/

Also, if you must use a background image...

1. Make sure you're using some reasonably accessible image replacement technique
2. Consider using sprites and :hover offsets so you don't get that nasty delay.

Jquery switchClass not work

Here example may help you fiddle

$(".left > ul > li > a").click(function () {
    $(this).siblings(".sub").slideToggle();
    if( $(this).hasClass("hov") || $(this).hasClass("down") ) {
        $(this).toggleClass("hov down");
     }
});

.switchClass() acts on classes but easing does not occur

The problem is the !important notation in your css rules, which overrides the inline css applied by the animation.

.packed {
    height:0;
}
.unpacked {
    height:32px;
}

Demo: Fiddle

Note: If you had any specific reason to use !important, please share them(and recreate the issue using the above fiddle) so that we can have a look at it.

---

If you can use css3 animations then

.container-warning {
    overflow-y: hidden;
    transition: height 1s;
}
.packed {
    height:0 !important;
}
.unpacked {
    height:32px !important;
}

then

$('.container-warning').removeClass('packed').addClass('unpacked');

Demo: Fiddle

JQueryUI SwitchClass has no effect on Javascript

Try to use event-delegation since you are changing the class at run time,

$(document).on('click', '.class2', function() {

});

Side Note : I just delegated the event to the document, since I don't know about the static parent in your context, use a closest static parent to delegate the event. because if we rely upon the document then obviously it will be the last element while the event got bubbled up to the DOM tree.

jQuery switch div class on click not working

You can't use space in ID. jQuery selector will think it's a descendent object!

Example if you have

<div class="ancestor">
      <div class="child">
      </div>
</div>

jQuery selector for child

$(".ancestor .child")

the space means descendent object. In your case, jQuery is looking for an object <3> inside an element with id circle

Source: http://www.w3schools.com/cssref/css_selectors.asp

Edit:

You also don't need to add the ID in the class attribute. May it work for you:

  var ID = $.trim($(this).attr('class').replace('circle-selected', '').replace('circle', ''));
  $("#circle_" + ID).toggleClass('circle').toggleClass('circle-selected');

See this JSFiddle

Neither switchClass nor addClass().removeClass() methods working

You can use .toggleClass() with two classes as parameter which needs to be switched:

$("#Solar").toggleClass("SolarDegree45 SolarDegree0");

first class in .toggleClass() method should be the one that already exists in element. which is SolarDegree45 in your case.

jQuery UI .switchClass --- undefined is not a function

your code is working awesome, check this fiddle

http://jsfiddle.net/e5o91c6g/

i guess your js-files are wrong, or you messed up with that closing </code>tag wich may cause misinterpreting, to be sure

just try these libs:

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

---

Related Topics