jQuery animate - expanding the right text content?

Question

Hi I am trying to animate or give any slide effect for toggling the class (the actual expanding), as it is a bit simple at the moment

Here is the fiddle I am working on with your help at the moment, but it is not doing anything and cannot figure it out

$(document).ready(function(){
  $(".gamewrapper").click(function(){
    $(".game-name", this).toggleClass("black");
    $(this).toggleClass("expand", 1000);
  });
});

Any help appreciated please,

Thanks in advance

Answer 1

jQuery's .toggleClass() method only takes 1 parameter, the 1000 you've got in there isn't doing anything.

If you want to animate the css changes between having the expand class and not, you have to:

1) Use CSS transitions on those properties:

http://www.w3schools.com/css3/css3_transitions.asp

2) Use another plugin. jQueryUI has a switchClass plugin that does that.

http://jqueryui.com/switchClass/

Answer 2

I agree with Nicholas,

CSS3 Transitions, jQueryUI or you could also animate all individual styles using jQuery.animate.

Eg

$('.classname').animate({'width':'100px','height':'100px'},200)

Answer 3

The jQuery UI toggleClass method is a built-in jQuery method override:

jQuery UI overrides several built-in jQuery methods in order to provide additional functionality. When using these overrides, it's important to make sure that jQuery UI is loaded. If jQuery UI is not loaded, the methods will still exist, but the expected functionality will not be available, resulting in bugs that may be hard to track down

the method accept an easing parameter as you are doing:

easing (default: swing) Type: String A string indicating which easing function to use for the transition.

the problem in your fiddle is that you are not including the jQuery UI library.

Working animation fiddle: http://jsfiddle.net/YqxAR/53/