5461 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Located in Australia
  • Has sold $1,000+ on Envato Market
+4 more
Australia says

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

437 posts here for love
  • Has referred 10+ members
  • Has sold $125,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 1+ items on Envato Market
+7 more
nCrafts says

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.

5325 posts The Dude Abides
  • Located in United States
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Has been part of the Envato Community for over 5 years
+9 more
CodingJack says

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
5899 posts
  • Sells items exclusively on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Has been part of the Envato Community for over 6 years
+8 more
VF says

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 :D

5325 posts The Dude Abides
  • Located in United States
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Has been part of the Envato Community for over 5 years
+9 more
CodingJack says


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 :D

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.

5899 posts
  • Sells items exclusively on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Has been part of the Envato Community for over 6 years
+8 more
VF says

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

437 posts here for love
  • Has referred 10+ members
  • Has sold $125,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 1+ items on Envato Market
+7 more
nCrafts says

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?

5461 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Located in Australia
  • Has sold $1,000+ on Envato Market
+4 more
Australia says

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

5325 posts The Dude Abides
  • Located in United States
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Has been part of the Envato Community for over 5 years
+9 more
CodingJack says

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:

http://www.codingjack.com/playground/jacked/jquery.html

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.

by
by
by
by
by
by