JQuery switchClass

Question

Is it possible to cancel switchClass transition?

I want the element to slowly get class A when you hover over it and slowly lose it again once the mouse is gone. However, the function seems buggy, and calling .stop(0,1) does not seem to help. Actually, this seems to violate him.

I have a live example here . Yes, it is 404 pages, but it does not matter. Navigation should gradually gain or lose a class, but it just jumps. The script can be found here .

Is such a transition possible?

EDIT:

Here is the code I'm using:

 $('#navbar li:not(.current) a').hover(function() { $(this).parent() .stop(1,0) .addClass('current', 1000); }, function () { $(this).parent() .stop(1,0) .removeClass('current', 1000); }); 

Perhaps because changing the class li does not lead to a transition in the style of its children?

EDIT2:

Yes, this is "fixed." Now a true mistake can be observed in all its glory (freezing in an intermediate state).

Answer 1

This is the closest I came to make it work:

Example: http://jsfiddle.net/TUrvP/

There may be some sorting, and you can use the :animated selector, although I had problems at first.

It may not be worth the effort ...

HTML

 <div id='myElement' class='blue'>content</div> 

CSS

 div { width: 100px; height: 100px; } .blue { background: blue; position:relative; left: 20px; } .myClass { background:red; margin-top: 50px; } 

JQuery

 var animating = false; var interval; $('#myElement').hover( function() { var $th = $(this); if(!animating && !interval) { $th.clearQueue(); animating = true; $th.addClass('myClass',500,function() {animating=false;}); } }, function() { var $th = $(this); if(interval) return false; if(animating) { interval = setInterval(function() { if(!animating) { $th.clearQueue(); animating = true; $th.removeClass('myClass',500, function(){animating = false;}); clearInterval(interval); interval = null; }},50) } else { $th.clearQueue(); $th.removeClass('myClass',500, function(){animating = false;}); } } ); 

Answer 2

It doesn't make sense to slowly get the class. The element either has a specific class or not, and CSS does not give any indication of specifying some kind of "partial inclusion" in the class.

edit - @patrick indicates that the jQuery user interface does support this, at least to some extent. The functions that control the class take a duration argument if you set up effect material.

Answer 3

It looks like you are looking for some kind of .animate jQuery function.

$('#clickme').hover(function() { $('#book').animate({ opacity: 0.25, left: '+=50', height: 'toggle' }, 5000, function() { // Animation complete. }); });

Otherwise switch class slowly makes no sense to me