0

私は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();       


        });

トゥイーンについてもわかりません（例：開始、終了、期間）

私が投稿したサイトでの効果の再現を手伝ってもらえますか？

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 に答える