jQuery FadeIn and FadeOut causes flickering?

问题

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);

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

Below is my original question:

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;
}

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
    }); 
});

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.

回答1:

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);

jsFiddle of a working example:

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

来源：https://stackoverflow.com/questions/15423614/jquery-fadein-and-fadeout-causes-flickering

标签

javascript

jquery

fadein

fadeout

flicker