how can I make my jquery animation smoother?

Question

I am building a social network site and I have high demands out of it so I need a little help in making the animation better and smoother. I have to admit I am a backend developer, not really doing much frontend stuff but this is what I got: I have a button and when the user presses the button I need to show the user a nice form. I have been working on a animation for this http://jsfiddle.net/bTZ5D/1/ . I find it ok, but not really WOW material, if anyone can make it better or suggest how to make it better I would appreciate it. This is my js code:

jQuery(function($){ $('body').on('click', '#ask-question', function() { var container = $('.ask-question-wrapper'); $(this).fadeOut('fast', function() { $(this).hide(); container.show(); container.animate({ height: "265px" }).animate({ height: "245px" });; }); }); })

I mean smoother, from a frontend developer point of view, much more fluid, I feel like mine is a little clunky — Mythriel
– Mythriel, Commented Mar 22, 2013 at 16:17
did you check out my fiddle above? Just play around with the speed if you want. I'm not completely sure because this is a very vague question. — wirey00
– wirey00, Commented Mar 22, 2013 at 16:27

optimisticupdate · Accepted Answer · 2013-03-22 16:25:52Z

Edit: Additionally you can also use a easing library.

Or a kind of opacity animating:

jQuery(function($){ $('body').on('click', '#ask-question', function() { var container = $('.ask-question-wrapper'); container.css('opacity', '0'); $(this).fadeOut('fast', function() { $(this).hide(); container.show(); container.animate({ height: "265px", opacity: 1}).animate({ height: "245px" }); }); }); })

http://jsfiddle.net/zp6fA/

Alex · Accepted Answer · 2013-03-22 16:20:22Z

1

smoother

Using the code posted by wirey and ('slow'): http://jsfiddle.net/MfdBw/

answered Mar 22, 2013 at 16:20

Alex

1,4744 gold badges17 silver badges44 bronze badges

Comments

mr_plum · Accepted Answer · 2013-03-22 16:21:34Z

0

Simply use jQueryUi and add some options to show, like container.show('clip');

answered Mar 22, 2013 at 16:21

mr_plum

2,4372 gold badges19 silver badges31 bronze badges

Collectives™ on Stack Overflow

how can I make my jquery animation smoother?

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related