同时运行两个jquery事件会导致闪烁 [英] running two jquery events at the same time causes flickering

问题描述

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

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

同时运行这些函数的执行方式为：

elem1卷轴顶部

elem1隐藏

elem2滚动到顶部

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

我可以做到这一点吗？

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

转换后的jquery元素闪烁和ios上的scrolltop 使用animate函数（请参阅 ） rel =nofollow> 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} 
）; 
} 
} 
）; 
} 
} 
）; 
  

I have two functions that I want to happen at the same time.

Function 1 is a window scrollTop and function2 is an absolute element hide (#elem1). These two functions take place immediately after an absolute element (#elem2) is placed on top of (#elem1).

Running these functions at the same time executes as:

elem1 scrolls top

elem1 is hidden

elem2 scrolls to top

This causes an instant flicker, blink on ios and I want to avoid it. I would have expected that changing the order of the functions would give me the results I expect, but it doesn't work (putting #elem1 hide before scrolltop).

How can I achieve this??

This is related to the following topic but I thought I would simplify it.

jquery element flicker after transition and scrolltop on ios

解决方案

Using the animate function (see: http://api.jquery.com/animate/) you can perform style updates only after previous animations have been completed. I'm sure there are other (prettier and more correct) ways of getting around it, but it seems to work.

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

这篇关于同时运行两个jquery事件会导致闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！