JQuery: Slide Animation Goes To Far, Then "jumps" To The Right Height

I've seen a few questions about a similar issue, but I haven't found a solution that makes sense to me yet. The problem is on the JSFiddle here: http://jsfiddle.net/twchapman/EEXjR

Solution 1:

The problem comes from padding which at times can make jQuery animations jittery. A fast solution for your problem is to leave your Js untouched and use a natural box model for your layout.

In your css just include:

* { -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box; 
            box-sizing: border-box; }

I really suggest to read this Paul Irish blog post and to include this code in all your projects.

Here's a working demo: http://jsfiddle.net/gleezer/EEXjR/3/

Solution 2:

Update your js.

function change(tab) {
    if(tab == active) return false;
    console.log(tab);
    console.log(active);
    if($("#" + active).length){   //check element is exists.
       $("#" + active).slideUp(animspeed, function() {changeTab(tab)})
    }else{
    changeTab(tab);
    }

}