Добавить анимацию в jQuery scrolling sidebar

Question

Я использую функцию боковой прокрутки в jQuery и хочу добавить анимацию к переходу. Как отредактировать мой код, чтобы применить анимацию, чтобы сгладить переход при прокрутке вверх и вниз по странице?

Вот мои FIDDLE

Вот мой 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; 
} 

Answer 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() :)