javascript - 为什么我使用 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