使用jQuery进行宽度动画跳跃

Question

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

http://jsfiddle.net/9F5DK/5/

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"});

        }
    );
});

- Niels

---

跟进。看起来是由于文本重新排版导致的，当span关闭时。如何解决这个问题？也许在关闭时隐藏它？ - Niels

嗯......仍然不起作用 链接，带着溢出：隐藏 - Niels

我的猜测是因为你正在对文本进行动画处理，而不是周围的容器。但我也很想知道答案。我会等待比我更聪明的人来回答。 - kasdega

我不知道你是否已经注意到了，但是你的容器是一个锚标签，这不仅会导致你的“主页”文本被下划线标记，还会在“box”下面多出一条下划线。 - kasdega

是的，那个样式在样式表的另一个部分被覆盖了 :-) - Niels

Answer 1

好的，我花了一些时间来弄清楚这个问题。通常情况下，我不喜欢过多地更改原始的html javascript/jquery，如果这对您没有用，我很抱歉。以下是一个JSFiddle，它可以实现您想要的功能，我想...

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

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

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

您可以在包装器内部放置任何内容，它们都会以相同的方式工作。

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

- kasdega

---

太棒了！！！谢谢kasdega！我刚开始再次研究这个问题，这是比我得到的更好的解决方案 :-) 我也喜欢hoverintent。 - Niels

Answer 2

我看到的问题：

在CSS或动画中为内联 <a> 或 <span> 标签设置高度或宽度。阅读这篇文章，了解在尝试为内联标签设置高度或宽度时可能会遇到的问题。这适用于您的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中更改起始值，它就会平滑地开始动画。我不确定你想要的动画是什么，但这应该是你可以采取的方向: 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"});
        }
    );
});

- jfriend00

---

我猜宽度状态应该是0和全尺寸（即根据文本自动扩展）。我猜我可以切换<a>的宽度（因为它被设置为display:block）从100px（如示例中所示）到全宽...但怎么做呢？ - Niels

请查看我有关填充动画的其他注释。一些内联元素不喜欢强制设置宽度。您可以使用块元素（如div）或inline-block元素来实现。在这种情况下，您将具有初始状态，其具有固定宽度和最终状态，其宽度为自动。同样，我认为您不能使用toggle（“width”）来实现此目的-我认为您必须明确设置两个状态。 - jfriend00

是的，所有的观点都很好。我现在要离开了，去睡觉了（墨尔本时间是凌晨1:30）。我明天早上会重新审视这个问题。zzzzzzzzzzz - Niels

Answer 3

经过一段时间的休息，我回来尝试这个动画。最终效果可以在这里看到：

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

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

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

比我更擅长此项工作的人可以使 js 更简洁，但这就是一个很好的帖子导航效果。

- Niels