jQuery FadeIn i FadeOut powodują migotanie?
Pierwotnie napisałem to pytanie na temat wtyczki jQuery. Od tego czasu próbowałem innego kodu używając tylko 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);
Ten kod nadal ma problem z migotaniem w systemie iOS. Jak rozwiązać ten problem?
Poniżej moje pierwotne pytanie:
Używam wywoływanej wtyczki jQueryCytuj Rotator. Działa świetnie w przeglądarce, jednak w systemie iOS (v6) po przejściu miga. Jest to dość denerwujące i nie wiem, jak rozwiązać problemy z migotaniem. Przeczytałem o tym-webkit-backface-visibility
ale nie wierzę, że tak jest. Najpierw miałem już ten kod w moim arkuszu stylów:
body {
-webkit-backface-visibility: hidden;
}
Po drugie, czy to nie dotyczy tylko przejść CSS 3? (Czy moje zrozumienie jest nieprawidłowe?)
Co powinienem spróbować rozwiązać ten problem?
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
});
});
Uwagi: Mam więcej HTML niż tutaj. To jest fragment. Używam jQuery 1.8.3. Nie mam nic przeciwko zmianie na inną wtyczkę, jeśli to działa (co oznacza, że tworzy proste przejście między<li>
elementy.) Próbowałem użyćQuovolver przed cytatem Rotator ale miałemzagadnienia i nie mogłem go uruchomić.