jquery - 左导航动画没有正确折叠

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

I think that they should check the class 'current' also in the .click event and not just in the .hover event, otherwise also if you go in another page the old menu button of the prev. page remains selected until you hover it

Answer 2

您应该.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"
         });
     });

});

你.stop()也应该点击