2

我的 tumblr 页面的标题似乎有点跳动，当我尝试为其不再位于页面顶部时的增长和收缩设置动画时。

该网页是Tobacco Endeavors，是一个 tumblr 博客。

<script type="text/javascript">                                         
    $(window).scroll(function(){ 
        if ($(this).scrollTop() > 1) {
            $("#abracadabra").fadeOut(500, function(){ 
                $("#header").animate({padding:"1.5em 0"}, 500);
            });
        } else {
            $("#abracadabra").fadeIn(500, function(){ 
                $("#header").animate({padding:"1em 0"}, 500);
            });
        }
    }); 
</script>

谢谢一群人。

4

4 回答 4

1

stop()并且fadeTo()有时可以解决一些奇怪的问题:)

jsBin 演示

$(window).scroll(function(){ 
        if ($(this).scrollTop() > 1) {
            $("#abracadabra").stop().fadeTo(500,0, function(){ 
                $("#header").stop().animate({padding:"1.5em 0"}, 500);
            });
        } else {
            $("#abracadabra").stop().fadeTo(500,1, function(){ 
                $("#header").stop().animate({padding:"1em 0"}, 500);
            }); 
        }
});

关于你的问题：

来自文档：

.fadeOut() 方法动画匹配元素的不透明度。一旦不透明度达到 0，显示样式属性设置为无，因此元素不再影响页面的布局。

导致跳动的结果。另一方面，fadeTo()方法

将持续时间设置为 0，此方法仅更改 opacity CSS 属性，因此 .fadeTo(0, opacity) 与 .css('opacity', opacity) 相同。

正如你所看到的，它很好地影响了页面的布局。

于 2012-10-22T23:57:02.890 回答
1

滚动事件可能会触发多次，您需要使用标志控制并发，如下所示：

<script type="text/javascript">
    window.flag = true;                                         
    $(window).scroll(function(){ 
        if ($(this).scrollTop() > 1) {
            if (window.flag) {
               window.flag = false;
               $("#abracadabra").fadeOut(500, function(){ 
                   $("#header").animate({padding:"1.5em 0"}, 500, function() {window.flag = true;});
               });
            }
        } else {
            if (window.flag) {
               window.flag = false;
               $("#abracadabra").fadeIn(500, function(){ 
                   $("#header").animate({padding:"1em 0"}, 500, function(){window.flag = true;});
               });
            }
        }
    }); 
</script>

更新：

更新了代码中的错字。试试上面的新版本。

于 2012-10-22T23:58:15.843 回答
0

看jQuery动画，不流畅

..只需将动画的缓动参数设置为线性。

如果您愿意，也可以使用人们制作的插件作为替代品。

于 2012-10-22T23:55:32.100 回答
0

jQuery/JavaScript 动画有时会跳动，也可能取决于个人的个人硬件设置。我喜欢为动画做的是制作一个有过渡的 css 类，然后添加该类。此外，制作另一个具有相反过渡的 css 类，并添加该类以制作动画。这很好用，如果我没记错的话，它提供了更高的浏览器兼容性。

于 2012-10-22T23:55:46.203 回答