3

ウィンドウがスクロールされたときに 50% のサイズにアニメーションするロゴ画像を作成しようとしています。私の問題は、ウィンドウのスクロール中にアニメーションが数回実行されることです。ウィンドウが 62px を超えてスクロールされている間に 1 回アニメーション化し、ウィンドウが 62px を超えてスクロールされた場合にもう一度アニメーション化するにはどうすればよいですか? クラスを追加して削除しようとしましたが、うまくいきませんでした。私はSOを検索しましたが、重複または類似の質問を見つけることができませんでした（あるとしたら悪いです！）。

JSFiddle はこちら: http://jsfiddle.net/jtheman/kEtPd/ (私の実際のプロジェクトをシミュレートするために、jsfiddle に追加の CSS を追加しました)

関連する HTML:

 <body>
   <header>
      <div id="logo">
           <img src="/img/logo.png">
       </div>
 ...

CSS:

header { position:relative;   }
header #logo { position:absolute; top: 62px; left: 0; width: 365px; height: 53px; }
header #logo img { position:absolute; bottom: 0; left: 0; width: 365px; height: 53px; }

そして私のjQuery：

$(window).scroll( function() {
    var scrollpos = $(window).scrollTop();
    if (scrollpos > 62)
    {
        $('#logo img').stop().animate({ 'width': '182px', 'height': '26px'},1000);
    }
    else 
    {
        $('#logo img').stop().animate({ 'width': '365px', 'height': '53px'},200);
    }
});
4

1 に答える 1

3

365px画像のサイズ変更がまだ開始されていない場合にのみアニメーション化されるように、幅がまだ元のサイズ ( ) であることを確認する必要があります。

if (scrollpos > 62)
{
   if ($('#logo img').width() == 365){
     $('header').css({'position':'fixed','top':'-62px'});
     $('#logo img').stop().animate({ 'width': '182px', 'height': '26px'},1000);
   }
}

-- 実際のデモを見る --

于 2012-12-04T11:22:31.363 に答える