2

私はもともとjQueryプラグインについてこの質問を書きました。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 でまだちらつきの問題があります。この問題を解決するにはどうすればよいですか?

以下は私の元の質問です：

Quote Rotatorという jQuery プラグインを使用しています。ブラウザでは問題なく動作しますが、iOS (v6) では遷移が発生するとちらつきます。ちらつきの問題を解決する方法がわかりません。私は読んだこと-webkit-backface-visibilityがありますが、これが事実だとは思いません。まず、スタイルシートに次のコードが既にありました。

body {
   -webkit-backface-visibility: hidden;
}

第二に、これは CSS 3 トランジションだけに当てはまるのではないですか? （それとも私の理解が間違っていますか？）

この問題を解決するにはどうすればよいですか?

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>要素間の単純なフェード トランジションを作成することを意味します)。Quote Rotator の前にQuovolverを使用しようとしましたが、問題が発生して動作しませんでした。

4

1 に答える 1

3

考え直してみると、この問題はおそらくfadeOut、要素がdisplay:none実行の最後に a を持つという事実によって引き起こされます。したがって、要素がフェードインするときは、最初に表示する必要があります。これは、あなたが説明する頑丈な「ちらつき」です。

$('#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);

動作例のjsFiddle：

http://jsfiddle.net/Eznpg/12/

于 2013-03-17T07:06:36.900 に答える