CODEWITHSUNDEEP
javascriptjqueryhtml
Mirko Simic
Mirko Simic

Reputation: 67

jQuery .toggleClass() 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.com/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?

Upvotes: 2

Views: 19336

Answers (5)

Shlomi Hassid
Shlomi Hassid

Reputation: 6596

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

Upvotes: 6

Mike Phils
Mike Phils

Reputation: 3505

Try this:

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

Upvotes: 0

DRobinson
DRobinson

Reputation: 4471

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.com/toggleClass/

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

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

Upvotes: 4

Carl
Carl

Reputation: 7544

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).

Upvotes: 1

Chris Herbert
Chris Herbert

Reputation: 6285

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

setTimeout( function(){

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

}, 7000 };

Upvotes: -3

Related Questions