5492 posts
  • 5 Years of Membership
  • Affiliate Level 1
  • Australia
  • Author Level 3
+5 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

492 posts here for love
  • Top Monthly Author
  • Trendsetter
  • Weekly Top Seller
  • Author Level 9
+10 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.

5467 posts The Dude Abides
  • Top Monthly Author
  • Trendsetter
  • Weekly Top Seller
  • United States
+13 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
6231 posts
  • Exclusive Author
  • Elite Author
  • Author Level 8
  • 7 Years of Membership
+13 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

5467 posts The Dude Abides
  • Top Monthly Author
  • Trendsetter
  • Weekly Top Seller
  • United States
+13 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.

6231 posts
  • Exclusive Author
  • Elite Author
  • Author Level 8
  • 7 Years of Membership
+13 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.

492 posts here for love
  • Top Monthly Author
  • Trendsetter
  • Weekly Top Seller
  • Author Level 9
+10 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?

5492 posts
  • 5 Years of Membership
  • Affiliate Level 1
  • Australia
  • Author Level 3
+5 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

5467 posts The Dude Abides
  • Top Monthly Author
  • Trendsetter
  • Weekly Top Seller
  • United States
+13 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