Question

如果您看一下：http://www.wearewebstars.dk/frontend/Borneunivers/boerneunivers.html 并且在左侧导航栏中开始点击，您会注意到有时单击导航中的链接时，它会崩溃您来自的链接 - 任何想法？我拥有的脚本是：

//Left navigation Animation
            $(".left-navigation ul li").hover(function(){
                if($(this).hasClass('current')){

                } else {
                    $(this).animate({'width': '95%'}, 100, function() {
                        $(this).find("span.nav-text").delay(100).css("display", "inline-block");
                    });
                }
            }, function(){  
                if($(this).hasClass('current')){

                } else {
                    $(this).animate({'width': '35px'}, 0, function() {
                        $(this).find("span.nav-text").css("display", "none");
                    });
                }
            });

Answer 1

你应该.stop()动画队列，以便中断其他动画来构建：

http://jsbin.com/oxisal/1/

$(".left-navigation ul li:not(.current)").hover(function( e ){

     var mEnt = e.type=="mouseenter"; // boolean true/false

     $(this).stop().animate({width: mEnt?'95%':35}, mEnt?100:0, function() {
         $(this).find("span.nav-text").css({
             display: mEnt? "inline-block" : "none"
         });
     });

});

你也应该点击<{p>} .stop()

Answer 2

我认为他们应该在.click事件中检查班级'current'，而不仅仅是在.hover事件中，否则如果你进入另一页的prev菜单按钮。页面保持选中状态，直到您将其悬停

左侧导航动画无法正确折叠

2 个答案: