Question

I’m getting a problem with jQuery UI’s toggleClass(), where if I leave the duration off, it behaves as expectedly, but with a specified duration, it only applies the class for the specified duration then removes the class.

The following code is loaded in a separate file (application.js) after jQuery and jQuery-UI:

( jQuery );
(function() {
    $('#expandingbox').hover(function() {
       $(this).toggleClass("hover", 1000);
    })
    $('#expandingbox').click(function() {
       $(this).toggleClass("expanded", 1000);
    });
}).call(this);

I’m using Rails 3.1, with Coffeescript and Sprockets 2.

Here’s an example of my code:
http://jsfiddle.net/27rNG/

The behaviour I want is:
– user hovers over image
– image animates down a bit
– user clicks on image
– image ainmates down a whole lot

Am I not using toggleClass correctly?

UPDATE:
The usage was correct but JQuery UI wasn’t being loaded correctly. I fixed this problem by loading JQuery UI separately from the Rails 3.1 Sprockets file, from Google’s CDN.

Answer 1

You are using the documentation of a JQuery “library” called JQuery UI. http://jqueryui.com/

The method you are actually calling is JQuery’s toggleClass ( http://api.jquery.com/toggleClass/ ), not JQuery UI’s.

You can see that the second argument is not duration.

Here is a starting point for you:
http://jsfiddle.net/27rNG/16/