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

使用firebug on FireFox 3.6进行测试

Answer 1

<强>可能

您的硬件配置，浏览器版本

可能会出现问题

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

jQuery效果运行顺畅，但有时会变得有点 - 为什么？

1 个答案: