jQuery effects run smoothly, but sometimes get jumpy - why?

I have been playing with a few jQuery effects and when they run smoothly look pretty neat, but sometimes (at random times when the script is invoked) the effects lock up and jump to the end result.

//--Expand Panel
$(".open-menu").live('click', function(){
    $("#wrap").css({ 'height' : newH + 'px' });
    $(".mini-menu").fadeOut(500);
    $("#headerCompany").animate({
        marginLeft: '+=142'
    }, 650);
    $("#avatar_box").fadeIn(650);
    $("#pinboard").fadeIn(550);
    $("div#centerHeader").slideDown("slow");
  开发者_开发问答  $("#toggle-pinboard a").removeClass("open-menu").addClass("close-menu");
    return false;
});
// Collapse Panel
$(".close-menu").live('click', function(){
    $("#wrap").css({ 'height' : newH + 'px' });
    $("#avatar_box").fadeOut(550);
    $("#pinboard").fadeOut(550);
    $("#headerCompany").animate({
        marginLeft: '-=142'
    }, 650);
    $("div#centerHeader").slideUp(750).delay(300);
    $.post('resources/ajax/ajax.php', {
        action: 'mini_menu'
    }, function(menu){
        $("#mini-menu").hide().html(menu).addClass("mini-menu").fadeIn(1500);
    });
    $("#toggle-pinboard a").removeClass("close-menu").addClass("open-menu");
    return false;
});

PHP:

switch($post['action']) {
    case 'mini_menu':
        echo "<nav>
                <a href='/' class='dashboard-menu-link'>Dashboard</a>
                 | <a href='contacts.php'>Contacts</a>
                 | <a href='mail.php'>Mail</a>
                 | <a href='files.php' class='files-menu-link'>Files</a>
                 | <a href='toolbox.php' id='toolbox-menu-link'>Toolbox</a>
                 | <a href='agenda.php' id='agenda-menu-link'>Agenda</a>
                 | <a href='settings.php' id='settings-menu-link'>Settings</a>
            </nav>";
    break;

HTML:

    <div id="header">
        <div id="topHeader">
            <div id="topHeaderGroup">
                <div id="headerCompany">
                    <span><b><?=$company;?></b></span>
                </div>
    -------->>>     <span id="mini-menu"></span> <<<--------
                <div id="toggle-pinboard">
                    <a id="toggle-menu" class="close-menu" href="#"><span></span></a>
                </div>
                <div id="headerWelcomeAccount">
                    <div class="nav_profile_menu" >
                        <a href="helix-007"><span class="top-header-color-change">View My Profile</span></a>&nbsp;|&nbsp;
                        <a href="logout.php"><span class="top-header-color-change">Logout</span></a>&nbsp;|&nbsp;
                        <a href="#" class="menu_drop"><span class="top-header-color-change">My Account</span></a>
                    </div><!-- end nav_profile_menu -->
                </div><!-- end headerWelcomeAccount -->
            </div><!-- end topHeaderGroup -->
        </div><!-- end topHeader -->

        <div id="centerHeader">
            <div id="header_container">
                <div id="avatar_box" class="border trans_white_gloss"></div>
                <div id="pinboard"></div>
            </div>
        </div><!-- end centerHeader -->
    </div><!-- END HEADER -->

CSS:

.mini-menu {
    margin: 0 auto;
    width: 400px;
    height: <?=$header_top_height;?>px;
    /*float: left;*/
    color: #FFF;
    padding-left: 20px;
}
.mini-menu a{
    color: #FFF;
}

Tested in FireFox 3.6 with firebug on

Probably

Problem could be with your hardware configuration, browser version

You can check effect on multiple platforms if problem exist then we need your full code with html.