0

CSS3 と jQuery を使用して回転子を作成する必要があります。クラスが追加されるタイミングを制御するために、jQuery でフェードインとフェードアウトを制御するために CSS3 を使用しています。ただし、これを機能させることはできません。これは、現在のコードがどのように機能しないかを示す jsFiddleです。コードは次のとおりです。

$('#action-alerts .rotate:gt(0)').hide();
  setInterval(function(){
 $('#action-alerts .rotate:first-child')
 .queue( function(next){ 
    $('#action-alerts .rotate:first-child').addClass('fadeOut-alert') 
    }).dequeue().delay(1100)
 .queue( function(next){
    $('#action-alerts .rotate:first-child').removeClass('fadeOut-alert')
    }).next('.rotate')
 .queue( function(next){ 
    $('#action-alerts .rotate:first-child').addClass('fadeIn-alert')
    }).dequeue().delay(1100)
 .queue( function(next){ 
    $('#action-alerts .rotate:first-child').removeClass('fadeIn-alert')
    }).dequeue()
    .end()
    .appendTo('#action-alerts');}, 
3000);

これを機能させるにはどうすれば適切に記述できますか？

私は当初、以下の質問から始めました。

元の質問

私は素敵なフェードトランジションでdivをトランジションする一種の回転子を構築しています。私はもともと jQuery しか使用していませんでした。デスクトップでは見栄えがよくなりましたが、モバイル デバイスではちらつきます。フォールバック用の jQuery を使用してモバイル デバイス用の CSS3 を使用したいのですが、CSS3 + jQuery を使用してクラスを制御することができません。

これが私が試みたコードです：

JS

$('#action-alerts .rotate:gt(0)').hide();
  setInterval(function(){
    $('#action-alerts .rotate:first-child').addClass('fadeOut-alert')
     .delay(1100).removeClass('fadeOut-alert')
     .next('.rotate').addClass('fadeIn-alert').delay(1100)
     .removeClass('fadeIn-alert').end().appendTo('#action-alerts');}, 
  3000);

注: 上記のコードは$(document).ready(function() { });、jQuery によって追加されているクラスも表示されませんが、エラーはスローされません。

CSS

@keyframes fadeIn-alert {
 from {
    opacity:0;
 }  
 to {    
    opacity:1;
 }
}

.fadeIn-alert {
   animation-duration: 1s;
   animation-fill-mode: both;
   animation-name: fadeIn-alert;
}

@keyframes fadeOut-alert {
 from {
    opacity:1;
 }  
 to {    
    opacity:0;
 }
}

.fadeOut-alert {
   animation-duration: 1s;
   animation-fill-mode: both;
   animation-name: fadeOut-alert;
}

注: ここに掲載されているコードでは、ベンダー プレフィックスを省略しています。

HTML

<div id="action-alerts">

       <div class="quote-holder rotate">
       <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>

       <div class="quote-holder rotate">
       <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>
</div>
<!-- MORE HTML AS ABOVE -->

コードが機能しないのはなぜですか? また、使用しているタイプのエフェクトを作成するにはどうすればよいですか?

4

0 に答える 0