2

我最初写了这个关于 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 过渡吗？（或者我的理解不正确？）

我应该尝试什么来解决这个问题？

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 ，但我遇到了问题，无法让它工作。

4

1 回答 1

3

fadeOut第二个想法，这个问题可能是由于导致元素display:none在其运行结束时具有 a的事实引起的。因此，当元素淡入时，首先需要显示它。这就是你描述的那种崎岖的“闪烁”。

$('#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-17T07:06:36.900 回答