0 
<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-title。当悬停在上面时，“eef”应该以摆动的方式水平切换。但相反，它以一种非常不优雅的方式弹出。我尝试了不同的事情，这些事情对我来说似乎是合乎逻辑的，以使其更顺畅，但我没有做对。

哦，还有：

span{
  display: none;
}

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

有任何想法吗？

4

2 回答 2

1

这是另一个使用 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;
}​
于 2012-12-30T19:27:00.613 回答
0

spans 是内联元素，所以你不能改变它们的宽度。此外，您必须隐藏溢出。请参阅此示例。

此外，您应该考虑使用 CSS3 过渡而不是 JavaScript - 您将获得更流畅的动画并且您的代码将更易于维护：demo。

于 2012-12-30T19:13:23.337 回答