jQuery的动画()；行为不像预期的那样(？)

Question

<h1 class="page-title">B<span>eef</span></h1>


jQuery(".page-title").hover(
  function() {

  $(".page-title span").animate({
    width: ['toggle', 'swing'],
  }, "slow"); },

  function() {
    $(".page-title span").animate({
    opacity: 1,
    width: ['toggle', 'swing'],
  }, "slow");
 }
);

考虑到这段代码，预期的行为是，最初我会将"B“作为..page标题。当悬停时，"eef“应该以一种摇摆的方式水平地切换。但它却以一种非常不光彩的方式突然出现。我尝试过不同的事情，这在我看来是合乎逻辑的，以使它更顺畅，但我没有把它做好。

哦，还有：

span{
  display: none;
}

试图模仿这种效果：http://susy.oddbird.net/

有什么想法吗？

Answer 1

span是内联元素，因此不能更改这些元素的宽度。还有，你必须隐藏溢出。见这个例子。

此外，您应该考虑使用CSS3转换而不是JavaScript -您将获得更流畅的动画，您的代码将更容易维护：演示。

Answer 2

下面是使用jQuery的另一个示例。与隐式定义宽度不同，您可以获取当前宽度，然后将其设置为0。这样，您可以动画任何长度的文本。正如@gronostaj所说，不能为内联元素设置宽度，因此必须将其设置为display:inline-block & overflow:hidden。添加一个.stop()也不错，这样你的动画就不会疯狂了。jsFiddle

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

CSS

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