CODEWITHSUNDEEP
jqueryjquery-animate
Mythriel
Mythriel

Reputation: 1380

how can I make my jquery animation smoother?

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" });;

        });
    });
})

Upvotes: 0

Views: 1650

Answers (3)

optimisticupdate
optimisticupdate

Reputation: 1689

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/

Upvotes: 1

mr_plum
mr_plum

Reputation: 2437

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

Upvotes: 0

Alex
Alex

Reputation: 1464

smoother

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

Upvotes: 1

Related Questions