Question

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

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

        }
    );
});

Answer 1

好的，我花了一些时间搞清楚这一点。通常我不喜欢这样改变原来的html javascript / jquery，如果这不适合你，那么我道歉。这是一个JSFiddle，你想做我想要的......

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

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

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

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

BTW我强烈建议使用jquery插件hoverIntent。

Answer 2

我看到的问题：

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

在我看来，动画可能会被宽度和不透明度的切换混淆。也许你最好指定悬停的回调和更直接地指定动画的开始和停止点，而不是让切换方法必须弄清楚起点和终点应该是什么。

例如，如果不将HTML重做为块元素（我认为需要可靠地设置动画宽度），这里只是不透明度的平滑动画。我已经将CSS中的起点设置为所需的起始不透明度，并且我已停止使用切换来设置动画并显式设置它。我不确定这是否是必需的，但它确实消除了切换试图猜测你想要什么的模糊性：http://jsfiddle.net/jfriend00/r2cdn/（仅在这个jsfiddle中的不透明动画，下面的jsfiddle中包含的两个动画）。 / p>

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

Answer 3

经过一段时间后，我回来再看看这个动画。最终效果可以在这里看到：

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

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

overflow:hidden规则会隐藏文本，因为它的容器已设置动画。

white-space: nowrap;

span会阻止文本重排。
div在加载时保持默认状态，并存储宽度。然后在悬停动画中重新应用该宽度。

有人比我更善于使js更简洁，但你有它。对导航有很好的效果。

跳进jQuery宽度动画

3 个答案: