在 jQuery 宽度动画中跳跃

Posted 2023-03-06

技术标签:

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

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

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

        
    );
);

【问题讨论】：

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

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