在 jQuery 宽度动画中跳跃答案

【问题标题】：Jumping in jQuery width animation在 jQuery 宽度动画中跳跃
【发布时间】：2011-10-07 03:58:39
【问题描述】：

我无法弄清楚我的动画为什么会跳跃。有什么想法吗？

jQuery(document).ready(function() {

// Animate the single page nav
    jQuery("a#post-nav-next").hover(

          function(){ 

            jQuery("a#post-nav-next span").stop(true, true).animate({width: "toggle", opacity: "toggle"});

        }
    );
});

【问题讨论】：

跟进。似乎它是由跨度关闭时文本重排引起的。如何解决这个问题？也许把它藏在近处？
嗯...仍然没有工作 link 溢出：隐藏
我猜这是因为您正在为文本而不是周围的容器设置动画。但我也对答案感兴趣。我会等待比我聪明的人回答。
另外我不知道你是否注意到了，但是你的容器是一个锚标签，不仅你的主页文本有下划线，而且你的“框”下面还有一个额外的下划线。
是的，样式在样式表的另一部分被覆盖了 :-)

标签： jquery animation toggle padding

【解决方案1】：

我看到的问题：

在 CSS 或动画中的内联 <a> 或 <span> 标记上设置高度或宽度。阅读this article 了解尝试在内联标签上设置高度或宽度的问题。这适用于您的 CSS 和动画。如果你想为宽度设置动画，我认为你需要在块元素上进行。

在我看来，动画可能被宽度和不透明度的切换弄糊涂了。也许您最好同时指定悬停回调并更直接地指定动画的开始和停止点，而不是让切换方法不得不弄清楚开始和停止点应该是什么。

例如，没有将 HTML 重做为块元素（我认为这是可靠地为宽度设置动画所必需的），这是一个仅在不透明度上的平滑动画。我已经将 CSS 中的起点设置为所需的起始不透明度，并且我已经停止使用切换来设置动画并明确设置它。我不确定这是必需的，但它确实消除了切换将尝试猜测您想要什么的歧义：http://jsfiddle.net/jfriend00/r2cdn/（仅在此 jsfiddle 中的不透明动画，两个动画都包含在下面的 jsfiddle 中）。

jQuery(document).ready(function() {

// Animate the single page nav
    jQuery("a#post-nav-next").hover(function(){ 
            jQuery("a#post-nav-next span").stop(true, true).animate({opacity: "1.0"});
        }, function() {
            jQuery("a#post-nav-next span").stop(true, true).animate({opacity: "0"});
        }
    );
});

对于宽度的切换，您希望在哪两种状态之间切换？作为人类，我并不清楚，jQuery.toggle() 也可能不清楚。如果您想要做的是为正确的填充设置动画，那么也许您应该直接这样做。

如果我为填充添加直接动画并更改 CSS 中的起始值，它会开始平滑动画。我不是 100% 确定我知道你在寻找什么动画，但这应该是你可以去的方向：http://jsfiddle.net/jfriend00/PE4qQ/。

jQuery(document).ready(function() {

// Animate the single page nav
    jQuery("a#post-nav-next").hover(function(){ 
        jQuery("a#post-nav-next span").stop(true, true).animate({"opacity": "1.0", "padding-right": "100px"});
        }, function() {
            jQuery("a#post-nav-next span").stop(true, true).animate({"opacity": "0", "padding-right": "0px"});
        }
    );
});

【讨论】：

我猜宽度状态应该是 0 和全尺寸（即扩展以容纳文本。我想我可以调整的宽度（因为它设置为 display: block）从 100px（如示例）到全宽......但是如何？？？
查看我关于填充动画的其他 cmets。一些内联元素不喜欢强制宽度。您可以使用块元素（如 div 或 inline-block 元素）来做到这一点。在这种情况下，您将拥有一个宽度固定的初始状态和一个宽度为 auto 的最终状态。同样，我认为您不能使用 toggle("width") 来做到这一点 - 我认为您必须明确设置这两种状态。
是的，所有优点。我现在要离开这个，然后上床睡觉（墨尔本凌晨 1:30）。我明天早上再去复查。 zzzzzzzzzzz

【解决方案2】：

好的，我花了一些时间来解决这个问题。通常我不喜欢这么多地改变原始的 html javascript/jquery，如果这对你不起作用，那么我很抱歉。这是一个 JSFiddle，它可以满足您的需求...

http://jsfiddle.net/LqHwk/1/

这个设置的一个好处是你可以添加尽可能多的

<div class="post-nav-next">

如你所愿在包装器中，它们都将工作相同

顺便说一句，我强烈推荐使用 jquery 插件 hoverIntent。

【讨论】：

太棒了！！！！谢谢卡斯德加！我刚开始重新考虑这个问题，这是一个比我更好的解决方案:-) 我也喜欢 hoverintent

【解决方案3】：

一段时间后，我又回来看这个动画。最终效果可见这里：

http://jsfiddle.net/Niels/zrru5/1/

需要注意的一些重要事项如下：

overflow:hidden 规则隐藏文本，因为它的容器是动画的。
span 上的 white-space: nowrap; 可防止文本重排。
div 在加载时保持默认状态，并存储宽度。然后在悬停动画中重新应用该宽度。

比我更擅长这个的人会让 js 更简洁，但是你有它。一个很好的帖子导航效果。

【讨论】：