为什么我使用fadeTo会产生闪烁效果？ （jQuery的）

Question

为什么我会出现闪烁效果？

我检查了这个question - jQuery FadeIn and FadeOut causes flickering?并将我的代码更改为使用fadeTo而不是淡入淡出。但是，我似乎仍然受到了闪烁的影响。有人可以帮忙吗？

HTML：

<ul class="testimonial-list">
    <li class="testimonial">
      <p>some text</p>
    </li>
    <li class="testimonial">
      <p>some text</p>
    </li>
    <li class="testimonial">
      <p>some text</p>
    </li>
</ul>

功能：

 function InOut( elem ){

 elem.delay(2000)
     .fadeTo(4000,1)
     .delay(2000)
     .fadeTo(4000,0,
         function(){ 
             if(elem.next().length > 0)
                 {InOut( elem.next() );}
             else
                 {InOut( elem.siblings(':'));} 
         }
     );
}

jQuery：

$('.testimonial').css("opacity",0);
    InOut( $('.testimonial:first') );

附注 - 有问题的网站是在Wordpress中，但我不知道这个问题是否重要。

Answer 1

您的代码看起来很好。我在IE和Chrome中测试了你的jsfiddle。没有理由它应该闪烁，虽然WP框架可能干扰，因为它往往是凌乱和臃肿。您可以尝试禁用某些插件。

你可以切换到CSS3动画或过渡，但动画不会在旧浏览器中显示。而且我发现JS动画无论如何都会更流畅。

CSS3动画很好：http://www.kirupa.com/html5/introduction_to_animation_html.htm#cssAnimations_topic