有jquery动画效果的问题

Question

Live Example Here

• Press any of buttons. Can you see shaky slideDown effect? In fact it must be smooth and slow slide down.
• If you've pressed for 1 time any of buttons try to press another one. The show and hide animation of forms is awful.

During anim.

After anim.

How to fix this problems?

Answer 1

The shakiness seems to be happening when each of the elements in the tab is hidden or displayed.

Get the height of each of your tabs and implement your resizing animation to those heights rather than individually animating after each element is hidden or displayed.

Answer 2

尝试与.animate()和.fadeIn() .fadeOut() .fadeTo(time,opacity)一起玩，而不仅仅是.show()或.show() .hide()

Answer 3

It's loading quite well for me. However it did take a long time for it to load in the first place. If you go to: http://gtmetrix.com/reports/tural.no-ip.org/ANBNA45n You'll see that your page is loading quite slowly and the stuttering effect you are seeing is probably coming from your computer having issues with the amount of information coming in.

Answer 4

You can try and speed things up a bit by making less $(selector) calls.. cache some of your jQuery objects when you are using them multiple times... also remember you can chain functions on jQuery objects.. jQO.addClass("foo").removeClass("bar"); is the same as jQO.addClass("foo"); jQO.removeClass("bar"); jQO.addClass("foo"); jQO.removeClass("bar");

like so...

(function(){
    var signin = $("#signin"), signup = $("#signup"), signin_f = $("#signin_form"), holder = $("#holder"), signup_f = $("#signup_form"), f_container = $("#form_container");
    $(".button").click(function () {
        if (counter === 0) {
            signin.removeClass('default_radius').addClass('right_radius');
            signup.removeClass('default_radius').addClass('left_radius');
            $("#first").animate({
                marginTop: "-=150px",
            }, 500);
        }
    });
    signup.click(function () {
        if (counter === 0) {
            holder.addClass('red_border').slideDown("slow");
            f_container.show();
            signup_f.show(0);
        } else {
            signin_f.hide(0);
            holder.switchClass( "green_border", "red_border", 1000 );
            f_container.animate({height:"260px"},1000);
            signup_f.show(0);
        }
        counter++;
    });
    signin.click(function () {
        if (counter === 0) {
            holder.addClass('green_border').slideDown("slow");
            f_container.show();
            signin_f.show(1000);
        } else {
            signup_f.hide(0);
            holder.switchClass( "red_border", "green_border", 1000 );
            f_container.animate({height:"110px"},1000);
            signin_f.show(0);
        }
        counter++;
    }); 
})();