向jQuery滚动边栏添加动画

问题描述：

我在jQuery中使用了滚动边栏功能，并且想要为过渡添加动画。如何编辑我的代码以在页面上下滚动时应用动画来平滑过渡？向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; 
}

答

尝试使用.stop().animate()。之所以我建议在.animate()之前使用.stop()是为了防止效应过度链接。基本上你会指示浏览器“当我滚动时放弃你现在正在做的事情”，然后“开始动画”。

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

向jQuery滚动边栏添加动画

相关推荐