懸停所需的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中使用+ =和-=動畫功能來添加和刪除填充中的固定數量。 這樣，您可以簡化所有操作，而無需實際獲取padding的值或不必跟蹤變量中的任何內容。 有關示例，請參見http://api.jquery.com/animate/ 。 使用此方法還可以解決new_padding變量的作用域問題，因為您將不再需要它。

然后，我認為find（“> a”）不一定在做您想要的事情。 如果您只想找到“ a”標簽，它們是被懸停的nav li ul li的子級，則應該只執行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

如果不運行您的代碼，我將猜測第二個函數將引發錯誤，並且永遠不會執行。 您已經在第一個函數中將padding定義為局部變量，但是第二個函數對此一無所知。 它在其作用域中查找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：沒有，但是我知道了。

Answer 3

首先，您在這里缺少右括號：

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

並且您應該始終將radix參數提供給parseInt ：

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

然后，您會遇到padding的范圍問題。 您在第一個函數參數中聲明了padding以將hover但嘗試在第一個和第二個函數中都使用它。 結果是mouseout函數中的animate沒有任何作用，因為其中的padding沒有定義。

如果您將var padding; 懸停功能之外：

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

您會得到更好的結果。