jQuery'；s animate（）；行为不符合预期（？）

试图模仿这种效果：

---

有什么想法吗？

span

s是内联元素，所以不能更改这些元素的宽度。此外，还必须隐藏溢出。看

---

此外，您应该考虑使用CSS3转换而不是JavaScript——您将得到更平滑的动画，并且您的代码将更易于维护：

这是使用jQuery的另一个示例。您可以获取当前宽度，然后将其设置为0，而不是隐式定义宽度。通过这种方式，可以设置任意长度文本的动画。正如@gronostaj所说，不能在内联元素上设置宽度，因此必须将其设置为

display:inline block

&

overflow:hidden

。添加.stop（）也很好，这样你的动画就不会疯狂了

jQuery

span{
  display: none;
}

CSS

var spanWidth = $('.page-title span').width();
$('.page-title span').width(0);
$('.page-title').on({
    mouseenter: function() {
        $('.page-title span').stop().animate({
            width: spanWidth,
            opacity: 1
        });
    },
    mouseleave: function() {
        $('.page-title span').stop().animate({
            width: 0,
            opacity: 0
        });
    }
});​

---

如果你发布一篇文章以及你的代码，这样我们就可以看到它的实际效果，这会非常有帮助。同时我假设你意识到你链接的网站是用CSS而不是jQuery来实现的？是的，我明白了。然而，我尝试了一个带有伪元素和悬停的版本，但发现转换不适用于伪元素：悬停-所以我在这个版本上遇到了一个死胡同，不太确定如何以一种好的方式解决它。因此，我们尝试使用jQuery。当然，请告诉我：非常好，谢谢。你刚才说的话产生了令人难以置信的效果。

var spanWidth = $('.page-title span').width();
$('.page-title span').width(0);
$('.page-title').on({
    mouseenter: function() {
        $('.page-title span').stop().animate({
            width: spanWidth,
            opacity: 1
        });
    },
    mouseleave: function() {
        $('.page-title span').stop().animate({
            width: 0,
            opacity: 0
        });
    }
});​

h1{
    text-align:center;
    font-size: 5em;
}
h1 span{
    display: inline-block;
    opacity: 0;
    overflow: hidden;
}​