jQuery 动画跳转答案

【问题标题】：jQuery Animation JumpjQuery 动画跳转
【发布时间】：2012-10-23 08:06:14
【问题描述】：

当我尝试为它的增长和收缩设置动画时，当它不再位于页面顶部时，我的 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>

谢谢大家。

【问题讨论】：

标签： javascript jquery html css tumblr

【解决方案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>

更新：

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

【讨论】：

【解决方案2】：

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

jsBin demo

$(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() 方法为匹配元素的不透明度设置动画。一旦 opacity 达到 0，display style 属性就会设置为 none，因此该元素不再影响页面的布局。

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

duration 设置为 0，这个方法只是改变了 opacity CSS 属性，所以 .fadeTo(0, opacity) 和 .css('opacity', opacity) 是一样的。

你可以看到很好地影响了页面的布局。

【讨论】：

【解决方案3】：

见jQuery animate, not smooth

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

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

【讨论】：

我该怎么做呢？这是 CSS 的东西还是 jQuery 的东西？

【解决方案4】：

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

【讨论】：