CODEWITHSUNDEEP
javascriptjqueryjquery-animateslidedown
Tural Ali
Tural Ali

Reputation: 23240

Having issue with jquery animation effects

Live Example Here

During anim. enter image description here

After anim. Result after animation

How to fix this problems?

Upvotes: 1

Views: 142

Answers (4)

Roko C. Buljan
Roko C. Buljan

Reputation: 206078

Try to play with .animate() and .fadeIn() .fadeOut() .fadeTo(time,opacity) instead of just .show() or .hide()

Upvotes: 1

rlemon
rlemon

Reputation: 17666

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

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++;
    }); 
})();

Upvotes: 0

Matthew
Matthew

Reputation: 8416

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.

Upvotes: 2

MikeD
MikeD

Reputation: 123

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.

Upvotes: 0

Related Questions