jQueryのヘルプに必要なホバリング

Question

ちょっと変わった理由のために私はこれを動作させることができません...ホバーに単純な効果が必要です。リンクが張られていると、パディング - 左が特定のピクセルに変化します..

jQuery("nav li ul li").hover(function() { 
    var padding = parseInt(jQuery(this).find("> a").css("paddingLeft"); 
     var new_padding = (padding + 5); 
    jQuery(this).find("> a").stop(true,true).animate({ paddingLeft: new_padding},200); 
    }, function() { jQuery(this).find("> a").animate({ paddingLeft: padding},200);} 
); 

私は元以上5にパディングが左に移動言うと、ときにマウスアウト元に戻ってそれを移動しようとしていますので、上記の。

おかげで...すべての

Answer 1

jQueryで+ =と - =アニメーション機能を使用して、パディングから固定量を追加したり削除したりすることを強くお勧めします。そうすれば、実際にパディングの値を取得したり、変数の中の何かを追跡したりすることなく、すべてを簡単に行うことができます。例はを参照してください。これを使うと、new_padding変数でスコープの問題を解決することもできます。なぜなら、これはもう必要ないからです。

次に、find（ ">"）が必ずしもあなたが望むことをやっているとは思わない。あなたが上に乗っているnav li ul liの子である "a"タグを探したいだけなら、find（ "a"）を実行するだけです。これは、最初の呼び出しで "a"タグであるすべてのマッチセレクタの子孫を検出します。

私はあなたがこのようなものを使用することができると思う：

jQuery("nav li ul li").hover(
    function() { 
     jQuery(this).find("a").stop(true,true).animate({paddingLeft: "+=5"},200); 
    }, 
    function() { 
     jQuery(this).find("a").stop(true, true).animate({paddingLeft: "-=5"},200); 
    } 
); 

あなたはそれがコードのこのデモではここで働く見ることができます：http://jsfiddle.net/jfriend00/9YQaV/

Answer 2

まず、あなたが不足している..私は、私はシンプルな何かが欠けています知っている...上記のパディングと右に移動し続けると、何らかの理由で戻っていませんここでは閉じ括弧：

var padding = parseInt(jQuery(this).find("> a").css("paddingLeft"); 

、あなたが常にがparseIntにradix引数を指定する必要があります

var padding = parseInt(jQuery(this).find("> a").css("paddingLeft"), 10); 

次に、paddingの範囲の問題があります。最初の関数引数のpaddingをhoverに宣言していますが、第1と第2の両方の関数でそれを使用しようとしています。その結果、paddingがそこに定義されていないため、mouseout関数のanimateは何もしません。

あなたはホバー機能の外に、あなたのvar padding;を置く場合：

var padding; 
jQuery("nav li ul li").hover(//... 

あなたはより良い結果を得るでしょう。

Answer 3

あなたのコードを実行せずに、私はあることを推測するつもりです2番目の関数はエラーをスローし、実行されることはありません。 の最初の関数のローカル変数としてpaddingを定義しましたが、2番目の関数はそのことについて認識していません。スコープ内でpaddingを探し、見つからず、グローバルスコープで検索し、見つからず、例外をスローします。

私が正しいかどうかを確認するためにFirefoxでアップFirebug火が...私は場合、あなたはカップルのオプションが持っている：

1. はpaddingグローバルにします。その宣言の一部であるvarを削除するだけで、これを行うことができます。しかし、グローバルはややスケッチであり、期待される順序（in1 - > out1 - > in2 - >など）で呼び出される関数に依存しますが、それは保証されていません。
2. 各機能の要素からmarginプロパティを再ロードします。これはタッチがあまり効率的でなくても、私がやることです。

（ブレーカラインがこれをフォーマットするSO強制的に...）

$("nav li ul li").hover(
    function() {$(this).find("> a").animate({ paddingLeft: load_padding() + 5}, 200);}, 
    function() {$(this).find("> a").animate({ paddingLeft: load_padding() - 5}, 200);} 
) 

・ホープ、このことができます！

PS：うまくいけば、そのコードフォーマット大丈夫 - このプレビューのそれを解体...

PPS：それはしませんでしたが、私はそれを考え出しました。