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はインライン要素であるため、それらの幅を変更することはできません。また、オーバーフローを非表示にする必要があります。この例を参照してください。

また、JavaScriptの代わりにCSS3トランジションの使用を検討する必要があります。アニメーションがよりスムーズになり、コードの保守が容易になります：demo。

于 2012-12-30T19:13:23.337 に答える