I use jQuery .toggleClass() function, class will toggled per click, that works perfectly, but i can't setup speed, i have tried this:

$('#databox').toggleClass('boxopened', 7000);

also this:

$('#databox').toggleClass('boxopened', 'easeInQuad');

and also this:

I have add latest jquery 1.10 and jqueryUI: 1.10.3

It's possible to setup speed?

I use jQuery .toggleClass() function, class will toggled per click, that works perfectly, but i can't setup speed, i have tried this:

$('#databox').toggleClass('boxopened', 7000);

also this:

$('#databox').toggleClass('boxopened', 'easeInQuad');

and also this: http://forum.jquery./topic/hover-and-toggleclass-fail-at-speed

I have add latest jquery 1.10 and jqueryUI: 1.10.3

It's possible to setup speed?

• javascript
• jquery
• html

• 1 Checked the docs for you. .toggleClass does not support speed - you need .animate. – Brian Commented Jul 24, 2013 at 14:42

5 Answers 5

Add to your classes:

CSS:

    -webkit-transition:0.4s;
    -moz-transition:0.4s;
    -ms-transition:0.4s;
    -o-transition:0.4s;
    transition:0.4s;

This "transition declaration" will force the timer , if its not working try adding !important or give us some code to inspect.

HERE IS A DEMO:

JSnippet Demo

Ensure that you are including JQuery UI Effects - the base JQuery does not allow transitions on show/hide/toggle, it's added as an extension from UI Effects. (In your app, or in browser console, try running $.ui.version)

http://api.jqueryui./toggleClass/

EDIT:Works for me on $.ui.version => "1.10.3" (the version you requested). Here's a demo: http://jsfiddle/yKFjA/1/

What styling changes are being applied that you wish to see animated?

You might consider setting the speed via CSS3 transitions; the answer I gave to similar question can get you started if that interests you. @Shlomi Hassid also provides similar advice.

This has some advantages

• simplification of code,
• separation of concerns,
• possibly better performance by handing off the job to the browser,
• definitely better performance on older browsers

and disadvantages -- inconsistent browser implementations mean anywhere from slight differences to non-functional (on older browsers, though I think the performance benefit outweighs the consistency benefit).

Try this:

$('#databox').toggleClass('boxopened', 1000, 'easeInQuad');

If you want to delay the change in class, use setTimeout:

setTimeout( function(){

$('#databox').toggleClass('boxopened');

}, 7000 };