1
Я играю с несколькими эффектами jQuery, и когда они работают гладко выглядят довольно аккуратно, но иногда (в случайные моменты, когда скрипт вызывается), эффекты блокируются и переходят к конечным результатам.Эффекты 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> |
<a href="logout.php"><span class="top-header-color-change">Logout</span></a> |
<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 с поджигатель на
Нужна более подробная информация: какой браузер (ы)? Вы пытались с меньшими эффектами? Вы в настоящее время запускаете пять разных эффектов одновременно, что происходит, когда у вас всего 2 или 3? –
ya true, есть ли способ консолидировать все эффекты 5ish? – Eli
@ s2x, комментируя комментарий другого участника, используйте '@' для уведомления этого участника. Если это необходимо, вы можете запускать эффект один за другим, а не параллельно - если вы хотите, дайте мне знать, и я отправлю код для этого. –