jquery - 同时运行两个jquery事件会导致闪烁

Question

我有两个想要同时发生的功能。

函数 1 是窗口 scrollTop，函数 2 是绝对元素隐藏 (#elem1)。这两个函数在绝对元素 (#elem2) 放置在 (#elem1) 之上之后立即执行。

同时运行这些函数执行如下：

elem1 滚动到顶部

elem1 被隐藏

elem2 滚动到顶部

这会导致瞬间闪烁，在 ios 上闪烁，我想避免它。我原以为更改函数的顺序会给我预期的结果，但它不起作用（将#elem1 hide 放在滚动顶部之前）。

我怎样才能做到这一点？

这与以下主题有关，但我想我会简化它。

ios上的过渡和滚动顶部后jquery元素闪烁

Answer 1

使用 animate 函数（参见：http ://api.jquery.com/animate/ ），您只能在之前的动画完成后执行样式更新。我敢肯定还有其他（更漂亮和更正确）的方法来解决它，但它似乎有效。

$('#elem1').animate(
   { top: 0 }
   , {
       duration: 500
       , easing: "linear"
       , complete: function () {
           $('#elem1').animate(
               { opacity: 0 }
               , {
                   duration: 500
                   , complete: function () {
                       $('#elem2').animate(
                           { top: 0 }
                           , { duration:500 }
                       );
                   }
               }
           );
       }
   }
);