jQuery FadeIn和FadeOut会导致闪烁？

我最初写了一个关于jQuery插件的问题。我自从尝试使用jQuery的另一个代码：jQuery FadeIn和FadeOut会导致闪烁？

$('#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中仍然存在闪烁问题。我该如何解决这个问题？

下面是我原来的问题：

我使用的是jQuery插件叫Quote Rotator。它在浏览器中效果很好，但是，在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，并且无法使其工作。

来源

2013-03-15 L84

再次想到，该问题可能是由于fadeOut导致元素在其运行结束时具有display:none这一事实造成的。因此，当元素淡入时，首先需要显示。这将是你描述的那种崎岖的“闪烁”。

$('#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/

来源

2013-03-17 07:06:36

感谢您的帮助。几个问题。 1）在第一个淡入淡出之前的div会出现在另一淡出之前。（注意：我将'，6000）'改为'600'。 2）到达最后一个div后，它不会再开始。 – L84 2013-03-17 07:15:41

我不确定我是否理解你的第一个问题 - 也许你能提供给我们完整的HTML，以便我可以自己测试它吗？ – 2013-03-17 14:25:27

[这里]（http://jsfiddle.net/Eznpg/）是一个带有问题的代码的jsFiddle。 – L84 2013-03-17 17:58:22

jQuery FadeIn和FadeOut会导致闪烁？

回答

相关问题