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-title。当盘旋时，“eef”应该以摆动的方式水平切换。但相反，以非常不合适的方式弹出。我尝试过不同的东西，这对我来说似乎很顺利，但是我没有把它弄好。

哦，并且：

span{
  display: none;
}

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

有什么想法吗？

Answer 1

这是使用jQuery的另一个例子。您可以获取当前宽度，然后设置为0，而不是隐式定义宽度。这样您就可以为任意长度的文本设置动画。正如@gronostaj所说，你不能在内联元素上设置宽度，因此必须将其设置为display:inline-block＆amp; 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;
}

Answer 2

span是内联元素，因此您无法更改其宽度。此外，您必须隐藏溢出。请参阅this example。

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

jQuery的animate（）;行为不如预期（？）

2 个答案: