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一个有效工作示例:
这篇关于jQuery FadeIn和FadeOut导致闪烁?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!