JQueryによるパディングメニュー

リンクをホバーするとリンクが前方に押し出され、マウスを動かすとリンクが後方に移動するメニューを設計したいと思います。JQueryによるパディングメニュー

私はそれを.hover関数で行うことができます。私はjQueryイベントを使用したくありません。私はhtmlタグに埋め込まれているジャバスクリプトイベントを使いたい。

<script type="text/javascript"> 
    function MIn() 
    { 
    jQuery(this).animate({paddingLeft:"20px"},500); 
    } 
    function MOut() 
    { 
    jQuery(this).animate({paddingLeft:"0px"},500); 
    }    
    </script> 
</head> 
<body> 
    <ul> 
    <li onmouseover = "MIn()" onmouseout="MOut()" ><a href="#">Home</a></li> 
    <li onmouseover = "MIn()" onmouseout="MOut()"><a href="#">Download</a></li> 
    <li onmouseover = "MIn()" onmouseout="MOut()"><a href="#">Products</a></li> 
    <li onmouseover = "MIn()" onmouseout="MOut()"> <a href="#">Register</a></li> 
    <li onmouseover = "MIn()" onmouseout="MOut()"><a href="#">About</a></li> 
    <li onmouseover = "MIn()" onmouseout="MOut()"><a href="#">Contact</a></li> 
    </ul> 
</body>

出典

2012-02-01 sap

動作しませんでしょうか？ – locrizak

リンクは埋め込まれません！ – sap

jQuery（this）をjavascript関数wout jQuery selectorで使用できませんでした。このような要素を送る必要があります。

<script type="text/javascript"> 
     function MIn(elm) 
     { 
     jQuery(elm).animate({paddingLeft:"20px"},500); 
     } 
     function MOut(elm) 
     { 
     jQuery(elm).animate({paddingLeft:"0px"},500); 
     }    
     </script> 
    </head> 
    <body> 
     <ul> 
     <li onmouseover = "MIn(this)" onmouseout="MOut(this)" ><a href="#">Home</a></li> 
     <li onmouseover = "MIn(this)" onmouseout="MOut(this)"><a href="#">Download</a></li> 
     <li onmouseover = "MIn(this)" onmouseout="MOut(this)"><a href="#">Products</a></li> 
     <li onmouseover = "MIn(this)" onmouseout="MOut(this)"> <a href="#">Register</a></li> 
     <li onmouseover = "MIn(this)" onmouseout="MOut(this)"><a href="#">About</a></li> 
     <li onmouseover = "MIn(this)" onmouseout="MOut(this)"><a href="#">Contact</a></li> 
     </ul> 
    </body>

出典

2012-02-01 15:15:09 Yorgo

素敵なこと、もっと説明できますか？ – sap

@ user1182970、[Gaby]（http://stackoverflow.com/a/9098196/1149495）がなぜこれとあなたのものでないかを説明してください。また、バインディングを使用しない理由は何ですか？ –

ねえ、私にそれを打つ。 :)基本的にすべてのイベントは、それを起動したターゲットを持っています。したがって、ターゲットを関数のパラメータとして渡しています。そのようにして、関数はそれを適用する要素を知っています。私はあなたのHTMLから行動に関連する何かを削除する方が良いと言わなければならない。ベストプラクティスは、JavaScript（フレームワークを使用したくない場合）でイベントリスナーを作成することです。これにより、ビヘイビア層とプレゼンテーション層を素早く分離することができます。 –

あなたはA -tag、ないLI上にあるイベント利きが必要になります。

は、ここに私の試みです。また、埋め込みを使用するためにAタグdisplay:blockまたはdisplay:inline-blockを作成する必要があります。

出典

2012-02-01 15:08:15

パディングをli de anchorに設定すると、親がパディングを取得するため、右側に移動します。これは正しい方法です、あなたは方法ではありません... –

これは、ラッパーではなく、リンクにアニメートする意味があります。 –

は機能しません。余白を左に変更しました。 – sap

あなたはjQueryを使用していますが、なぜイベントapiではないのですか？

$(document).ready(function() { 
    $('li').hover(function() { 
    // onmouseover 
    $(this).animate({'padding-left': '20px'}, 500); 
    }, function() { 
    // onmouseout 
    $(this).animate({'padding-left': 0}, 500); 
    }); 
});

このコードの仕事だけでなく、実際の例：http://jsfiddle.net/HXpPF/2/は

stop()機能はカーソルがLiを行く場合は、アニメーションを停止することです。あなたのケースでは、あなたのメソッドの内部

出典

2012-02-01 15:08:40

私はそれを言及しています.hoverなし – sap

@Stefan、 '.hover（）'は、マウスセンターとマウスの削除のショートカットです。[ソース]（http://james.padolsey.com/jquery/git/jQuery.fn.hover） /）。 –

thisあなたは要素への呼び出しを結合していないので、あなたがそれを期待するものではありません..しかし、代わりに、直接ウィンドウのコンテキストでそれを呼び出している... this === window ...

あなたは

デモ.. jQueryの

$('li').hover(MIn, MOut);

との結合を行い、onmouseoverとonmouseout属性を削除する必要がありますhttp://jsfiddle.net/FydWH/

出典

2012-02-01 15:09:20

私はバインドせずにやりたいですか？どんな方法ですか？ – sap

今のところ、イベントバインディングを使用したくない場合は、この方法でパラメータ/引数として参照を現在の要素に渡すことができます。

HTML

<li onmouseover = "MIn(this)" onmouseout="MOut(this)" ><a href="#">Home</a></li>

Javascriptを

function MIn(el) { 
    jQuery(el).animate({paddingLeft: "20px"}, 500); 
}

出典

2012-02-01 15:15:57 Stefan

JQueryによるパディングメニュー

答えて

関連する問題