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中使用+ =和 - =动画功能来添加和删除填充中的固定数量。这样你就可以在不实际获取填充值或必须跟踪变量中的任何内容的情况下更轻松地完成所有操作。有关示例，请参阅http://api.jquery.com/animate/。使用它也可以解决你对new_padding变量的范围问题，因为你不再需要了它。

然后，我不认为发现（“＆gt; a”）必然会做你想要的。如果你只是想找到“a”标签，这些标签是正在盘旋的导航器的子项，那么你应该找到（“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以查看我是否正确...如果我是，那么您有两个选择：

让padding成为全球性的。您应该只需删除其声明的var部分即可。但是全局变量有点粗略，它们将依赖于依赖于它们按预期顺序调用的函数（in1 - ＆gt; out1 - ＆gt; in2 - ＆gt;等），虽然这很可能，但它并不能保证。
从每个函数中的元素重新加载margin属性。这就是我要做的事情，即使效率低下也是如此。

（Breaker line强制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");

你应该始终向parseInt提供radix参数：

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( //...

你会得到更好的结果。

悬停时需要jQuery帮助

3 个答案: