jquery - 滚动动画只播放一次

Question

滚动 # 徽标和 # 导航移动。我想让动画只播放一次，但是，我怎样才能最好地实现？

    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();
    var contentHeight = $('#content').height();
    var footerHeight = $('#footer').height();


    var newSize = viewportHeight - footerHeight + 50;

    var $navigation = $('#navigation');
    var $logo = $('#logo'); 
    var noRun = 0
    var $win = $(window).scroll(function() {
        $navigation.animate({
          top: newSize}, 1500, function() {
          $('#navigation .active').removeClass('active');
          $('#navigation .current').addClass('active');

          console.log('animation 1 finished');


          });
        $logo.animate({
          top: 100}, 1500, function() {
          console.log('animation 2 finished');


          });
    });

Answer 1

动画播放完毕后，从 $(window) 中解绑滚动事件监听器，使动画不再被滚动事件播放。

var $win = $(window).scroll(function() {

    $navigation.animate({
      top: newSize}, 1500, function() {
      $('#navigation .active').removeClass('active');
      $('#navigation .current').addClass('active');
      console.log('animation 1 finished');
      });

    $logo.animate({
      top: 100}, 1500, function() {
      console.log('animation 2 finished');
    });

    $(window).off('scroll');
});

更新

如果您使用的 jQuery 版本低于 1.7，请使用unbind而不是off

JSFIDDLE

http://jsfiddle.net/XghCY/1/

<div style="height: 2000px;"></div>

$(window).scroll(function() {
    alert('scroll event is triggered!');
    $(window).off('scroll');
});