jQuery FadeIn和FadeOut导致闪烁？

2019-10-11 15:39:15 阅读：1738 来源： 互联网

标签：flicker fadein javascript jquery fadeout

我最初写了有关jQuery插件的问题.从那以后,我尝试仅使用jQuery编写另一个代码：

$('#action-alerts .rotate:gt(0)').hide();
 setInterval(function(){
    $('#action-alerts .rotate:first-child').fadeOut(600)
       .next('.rotate').delay(600).fadeIn(600)
       .end().appendTo('#action-alerts');}, 
  3000);

此代码在iOS中仍然存在闪烁的问题.我该如何解决这个问题？

以下是我的原始问题：

我正在使用一个名为Quote Rotator的jQuery插件.它在浏览器中很好用,但是,在iOS(v6)中,当过渡发生时,它会闪烁.这很烦人,我不确定如何解决闪烁问题.我已经阅读过有关-webkit-backface-visibility的信息,但我认为情况并非如此.首先,我已经在样式表中包含以下代码：

body {
   -webkit-backface-visibility: hidden;
}

其次,这不仅仅适用于CSS 3 Transitions吗？ (或者我的理解不正确吗？)

我应该如何解决这个问题？

HTML

<div id="action-alerts">
  <ul>
    <li>
       <div class="quote-holder">
       <div class="grid_10">
       <h3 class="action-box-red"><span class="alert-icon">Text</span></h3>     
       </div>
       <div class="grid_2">
       <a target="_blank" href="#" class="default_button xlarge textcenter red">Read the <br> Report</a>
       </div>
       </div>
    </li>
    <li>
       <div class="quote-holder">
       <div class="grid_10">
       <h3 class="action-box-red"><span class="alert-icon">Text</span></h3>     
       </div>
       <div class="grid_2">
       <a target="_blank" href="#" class="default_button xlarge textcenter red">Take <br> Action</a>
       </div>
       </div>
    </li> 
  </ul>
</div>

JS：

$(function() {
    $('#action-alerts').quote_rotator({
        rotation_speed: 9000
    }); 
});

注意：我的HTML数量超过了此处发布的数量.这是一个片段.我正在使用jQuery 1.8.3.我不介意更改为其他插件(如果它可以工作的话)(意味着它会在< li>元素之间创建简单的淡入淡出过渡.)我曾尝试在Quote Rotator之前使用Quovolver,但我使用issues却无法使其工作.

解决方法:

再想一想,该问题可能是由于fadeOut导致元素显示不显示而导致的：因此,当元素淡入时,首先需要显示它.这就是您所描述的那种粗糙的“闪烁”.

$('#action-alerts .rotate:gt(0)').fadeTo(10,0);
setInterval(function(){
    $('#action-alerts .rotate:first-child').fadeTo(1000,0, function() { 
        $('#action-alerts .rotate:first-child').next('.rotate').delay(300).fadeTo(1000,1)
          .end().appendTo('#action-alerts');
    });
}, 
3000);

jsFiddle一个工作示例：

http://jsfiddle.net/Eznpg/12/

标签：flicker,fadein,javascript,jquery,fadeout
来源： https://codeday.me/bug/20191011/1893682.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

jQuery FadeIn和FadeOut导致闪烁？