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()我推荐使用before的原因.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()被触发。有关更多说明，请查看.animate() 的 jQuery API :)

于 2013-03-05T23:41:57.510 回答