悬停时需要 jQuery 帮助答案

【问题标题】：jQuery help needed with hover悬停时需要 jQuery 帮助
【发布时间】：2011-07-30 12:25:15
【问题描述】：

嘿，伙计们，出于某种奇怪的原因，我无法让它工作......我只需要一个简单的悬停效果，如果链接悬停在上面，填充左侧会更改为特定像素..

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 的位置，并在鼠标移出时将其移回原来的位置。上面的内容通过填充一直向右移动，并且由于某种原因不会返回......我知道我错过了一些简单的东西......

谢谢...

【问题讨论】：

标签： jquery hover

【解决方案1】：

我强烈建议您在 jQuery 中使用 += 和 -= 动画功能从填充中添加和删除固定数量。这样，您可以更简单地完成所有操作，而无需实际获取填充的值或不必跟踪变量中的任何内容。有关示例，请参阅http://api.jquery.com/animate/。使用它还可以解决 new_padding 变量的作用域问题，因为您不再需要它了。

那么，我不认为 find("> a") 一定会做你想做的事。如果您只想找到悬停在 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/

【讨论】：

我添加了一个 jsFiddle 演示，您可以看到它的实际效果。

【解决方案2】：

如果不运行您的代码，我会猜测第二个函数会引发错误，并且永远不会被执行。您在 first 函数中将padding 定义为局部变量，但第二个函数不知道它。它在其范围内查找padding，没有找到，在全局范围内查找，没有找到，并抛出异常。

在 Firefox 中启动 Firebug 看看我是否正确...如果正确，您有几个选择：

将padding 设为全局。您应该能够通过删除其声明的var 部分来做到这一点。但是全局变量有点粗略，它们将依赖于依赖它们的函数以预期的顺序（in1 -> out1 -> in2 -> 等）被调用，虽然这很可能，但不能保证。
从每个函数中的元素重新加载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：没有，但我想通了。

【讨论】：

【解决方案3】：

首先，您在这里缺少一个右括号：

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

您应该始终将radix 参数提供给parseInt：

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

那么您的padding 存在范围问题。您在hover 的第一个函数参数中声明了padding，但试图在第一个和第二个函数中使用它；结果是 mouseout 函数中的 animate 什么都不做，因为那里没有定义 padding。

如果您将 var padding; 放在悬停功能之外：

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

你会得到更好的结果。

【讨论】：