Question

我是javascript的新手。我被要求做一些像http://www.samsung.com/global/galaxys3/feature.html#smartstay

上的导航节目

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

我听说补间能够完成这项工作。目前正在使用tween.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;
    }

一旦你添加了供应商前缀，这将适用于大多数现代的浏览器，而对于较旧的浏览器，旧版的浏览器会优雅降级，以便在悬停时立即显示整个宽度。

鼠标悬停时导航宽度（缓慢）增加

1 个答案: