javascript - jQuery 效果运行流畅，但有时会变得不稳定 - 为什么？

Question

我一直在玩一些 jQuery 效果，当它们顺利运行时看起来非常整洁，但有时(在调用脚本时的随机时间)效果会锁定并跳转到最终结果。

//--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;
}

在 FireFox 3.6 中测试并开启 firebug

Answer 1

可能

问题可能出在您的硬件配置、浏览器版本

您可以在多个平台上检查效果，如果存在问题，那么我们需要您的完整 html 代码。