动画闪烁固定header，如何停止？

Question

我有一个固定的 header 并想在徽标上制作淡入淡出动画，但是当我滚动时它闪烁，我在 [=22= 处看到了 .stop() 和 .finish() ] 文档，但不知道如何在滚动功能中实现它。

Here is the fiddle:

http://jsfiddle.net/n25dw0qq/8/

（抱歉我的英语不好）

谢谢！

Answer 1

问题是每次滚动时都会触发动画。确保只触发一次动画。

一个简单的方法是添加一个变量来跟踪动画状态。

var wasAnimated = false;

if (!wasAnimated) {
   $('#myimage').fadeOut('fast', function() {
       // Do something else
   });
   wasAnimated = true;
}

我更新了your fiddle。看看吧。

更好的解决方案是更改您的应用程序逻辑以仅在某个 window 偏移位置触发动画。例如在 Y = 37。不要为此目的使用 $(this).scrollTop() > 0。

动画闪烁固定header，如何停止？

Animation flashing with fixed header, how to stop?

jquery

scroll

menu