jQuery FadeIn和FadeOut导致闪烁？ [英] jQuery FadeIn and FadeOut causes flickering?

问题描述

我最初写了一个关于jQuery插件的问题。我之后尝试使用jQuery的另一个代码：

I originally wrote this question about a jQuery plugin. I since attempted another code using just 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中的闪烁问题。我如何解决这个问题？

This code still has the flickering issue in iOS. How do I solve this issue?

以下是我原来的问题：

我正在使用名为引用旋转器的jQuery插件。它在浏览器中运行良好，然而，在iOS（v6）中，当转换发生时，它会闪烁。这很烦人，我不知道如何解决闪烁问题。我已经阅读了 -webkit-backface-visibility 但我不相信这种情况。首先，我已在样式表中使用了此代码：

I am using a jQuery Plugin called Quote Rotator. It works great in the browser, however, in iOS (v6) when the transition happens it flickers. It is quite annoying and I am not sure how to solve the flicker issues. I have read about -webkit-backface-visibility but I do not believe this is the case. First I already had this code in my stylesheet:

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

第二个不适用于CSS 3过渡吗？ （或者我的理解不正确？）

Second doesn't this just apply to CSS 3 Transitions? (Or is my understanding incorrect?)

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

What should I try to solve this issue?

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> 元素之间创建一个简单的淡入淡出过渡。）我试图使用 Quovolver 但是我有问题，无法使其发挥作用。

Notes: I have more HTML than posted here. This is a snippet. I am using jQuery 1.8.3. I do not mind changing to another plugin if it works (Meaning it creates a simple fade transition between <li> elements.) I have attempted to use Quovolver before Quote Rotator but I had issues and could not get it to work.

推荐答案

第二个想法，问题可能是因为 fadeOut 导致元素在运行结束时显示 display：none 。因此，当元素逐渐淡入时，首先需要显示它。这将是你所描述的坚固的闪烁。

Second thought, the issue is probably caused by the fact that fadeOut causes the element to have a display:none at the end of its run. Therefore, when the element goes to fade back in, first it needs to be shown. This would be that rugged "Flicker" you describe.

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

js一个有效工作示例：

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

这篇关于jQuery FadeIn和FadeOut导致闪烁？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！