Add easing to this simple function ...

I am not the best with jQuery.

So wanted to add easing to this function:

$(function() {
            $('#usergroup').change(function(){
                $('.groups').hide();
                $('#' + $(this).val()).show();
            });
      });

aside from adding (“slow”) to .show func and (1000) to .hide func.

Wondered what I would do to add swing , etc

Go for this plugin: http://jquery.malsup.com/cycle/ Or else, if you want more flexibility, read about jQuery animate: http://api.jquery.com/animate/

I use jQuery animate for almost all my needs.

You can also do transitions with CSS, but it’s not recommended. The options are very few and it’s not compatible across browsers.

My personal opinion, no one should be using jQuery for animating anymore. It’s insanely slow compared to modern animation libraries.

As for your question, “swing” is the default easing. But “show()” and “hide()” require an argument to animate. So you could do it like this:

$('.groups').hide("swing"); // default duration

or

$('.groups').hide(1000); // 1 second

CodingJack said
My personal opinion, no one should be using jQuery for animating anymore. It’s insanely slow compared to modern animation libraries.

+1, personally I came to that extent too

VF said

CodingJack said
My personal opinion, no one should be using jQuery for animating anymore. It’s insanely slow compared to modern animation libraries.

+1, personally I came to that extent too

Yeah, and I don’t want to sound like an elitist or anything. It’s just kind of like using fl.transitions back in the day vs. anything else.

^ Yes, and as of now the Sizzle + javascript + stylesheet can be much flexible for light weight to complex animations (and cover wider devices), since we can’t depend on jQuery 2.0 anymore as it lacks supporting old IE versions.

CodingJack said
My personal opinion, no one should be using jQuery for animating anymore. It’s insanely slow compared to modern animation libraries.

As for your question, “swing” is the default easing. But “show()” and “hide()” require an argument to animate. So you could do it like this:

$('.groups').hide("swing"); // default duration

or

$('.groups').hide(1000); // 1 second

Interesting. I thought jQuery would have sufficed for simple animation needs. I wasn’t aware of this. What other libraries would you recommend for simple animation needs like, say, easing?

To be honest, we use jQuery natively throughout the site, so no need to use another library. I went with my initial code in the end, but used fast for show dec’ and 1000 for hide dec’ works a treat

nCrafts said
Interesting. I thought jQuery would have sufficed for simple animation needs. I wasn’t aware of this. What other libraries would you recommend for simple animation needs like, say, easing?

Depends on the application I guess. Personally, if I were just animating a few things I’d probably just use CSS3 and use jQuery as a fallback. But if you’re doing anything advanced and performance is important, you’ve really got to be using requestAnimationFrame (RAF), CSS3, or both. And as of right now, jQuery doesn’t support RAF.

Here’s a stress test that shows how miserable jQuery performs compared to two other animation engines:

And in that test jQuery isn’t animating color while the other two are so even with an extra layer of animation removed it’s still that bad.