鼠标悬停时要(缓慢)增加导航宽度

Question

我是javascript的新手。我被要求做一些类似导航节目的事情 http://www.samsung.com/global/galaxys3/feature.html#smartstay

我有一个名为.container的类，其中包含许多子类。我需要在鼠标悬停时增加 .menu 的宽度。目前，在鼠标悬停事件期间，有 2 个元素受到影响。是否可以更改代码，以便仅影响当前的鼠标悬停元素？

我听说补间能够胜任这项工作。当前使用补间.js现在。

下面是我的代码：

        $('.menu').mouseover(function(){
            var i=0;
            //case sensitive
            $('.menu').width('50px');
            tweenTA2 = new Tween(new Object(),'xyz',Tween.regularEaseOut,0,100,1);
            var myelem = $(this);
            tweenTA2.onMotionChanged = function(event){ 
                $(this).text('here');
                        setTimeout(function(){
                            i= i+1;
                            if (i < 100)
                            {
                                myelem.width(i);
                                myelem.css("background-color", "yellow");
                            }

                        },100);
            };
            tweenTA2.onMotionStarted = function(event){ 
                        $('.menu').width('50px');
            };
            //tweenTA2.onMotionResumed = function(event){
            //  $('.menu').width('50px');
            //};    
            tweenTA2.start();       

        });

我也不确定补间（例如开始、结束、持续时间）

你能协助在我发布的网站上重现效果吗？

Answer 1

如果你不需要支持较旧的浏览器，那么我建议完全忘记JavaScript，并使用CSS3过渡来完成这项工作，而无需任何外部库。

类似的东西

#menu {
    width:100px;
    transition:width 1s ease-in-out;
    }
#menu:hover {
    width:300px;
    transition:width 1s ease-in-out;
    }

添加供应商前缀后，这将适用于大多数现代浏览器，对于较旧的浏览器，这将优雅地降级为在悬停时立即显示全宽。