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

Question

我有两个功能，我希望同时发生。

函数1是窗口scrollTop，function2是绝对元素hide（＃elem1）。这两个函数在绝对元素（＃elem2）置于（＃elem1）之上后立即发生。

同时运行这些函数执行：

elem1滚动顶部

elem1隐藏

elem2滚动到顶部

这会导致瞬间闪烁，在ios上闪烁，我想避免它。我本来期望改变函数的顺序会给我我期望的结果，但它不起作用（将＃elem1隐藏在scrolltop之前）。

我怎样才能实现这个目标？

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

jquery element flicker after transition and scrolltop on ios

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 }
                       );
                   }
               }
           );
       }
   }
);