0

jQuery でスクロール サイドバー機能を使用しており、トランジションにアニメーションを追加したいと考えています。ページを上下にスクロールするときの遷移をスムーズにするアニメーションを適用するようにコードを編集するにはどうすればよいですか?

これが私のフィドルです

これが私のjsです：

$(function() {

    var $blah   = $("#blah"), 
        $window    = $(window),
        offset     = $blah.offset();

  $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
   $blah.css('top','120px');
         } else {
   $blah.css('top','440px');
   }
    });


});

これが私のCSSです：

#blah {
    display:none;
    top: 320px;
    right: 30px;
    position: fixed;
    margin: 0 20px 0 20px;
    padding: 0px !important;
}
4

1 に答える 1

1

を使ってみてください.stop().animate()。.stop()前の使用をおすすめする理由.animate()は、効果が連鎖しすぎないようにするためです。基本的には、ブラウザに「スクロール時に現在行っていることをドロップ」してから「アニメーションを開始」するように指示します。

$(function () {

    var $blah = $("#blah"),
        $window = $(window),
        offset = $blah.offset();

    $window.scroll(function () {
        if ($window.scrollTop() > offset.top) {
            $blah.stop().animate({
                top: 50
            });
        } else {
            $blah.stop().animate({
                top: 100
            });
        }
    });
});

ここでフィドルを参照してください - http://jsfiddle.net/4VbDN/6/

.animation()[編集]: アニメーションの長さを調整したり、トリガーされた場合でもコールバック関数を割り当てることもできます。詳細な手順については、jQuery API for .animate() を確認してください:)

于 2013-03-05T23:41:57.510 に答える