为什么我在使用 fadeTo 时会产生闪烁的影响？ (jQuery)答案

【问题标题】：Why am I getting a flickering affect using fadeTo? (jQuery)为什么我在使用 fadeTo 时会产生闪烁的影响？ (jQuery)
【发布时间】：2014-10-15 02:08:32
【问题描述】：

为什么会出现闪烁效果？

我检查了这个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 中，但我不知道它是否对问题很重要。

【问题讨论】：

也可以在这个小提琴中看到它：jsfiddle.net/yj7fxufx [更新 - 只是注意到它确实重现了问题。]
对我来说似乎很流畅。您是否考虑过仅使用 CSS 过渡？
这里也没有闪烁（FF）

标签： javascript jquery css wordpress

【解决方案1】：

您的代码看起来不错。我在 IE 和 Chrome 中测试了你的 jsfiddle。它没有理由闪烁，尽管 WP 框架可能会干扰，因为它往往是混乱和臃肿的。您可以尝试禁用一些插件。

您可以切换到 CSS3 动画或过渡，但动画不会在旧版浏览器中显示。而且我发现 JS 动画播放起来更流畅。

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

【讨论】：