0

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

我有一个名为 .container 的类，其中包含许多子类。我需要在鼠标悬停时增加 .menu 的宽度。目前，在 mouseover 事件期间，有 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();       


        });

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

你能协助复制我发布的网站上的效果吗？

4

1 回答 1

0

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

就像是

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

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

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

于 2012-06-20T10:32:09.650 回答