0

我需要使用 CSS3 和 jQuery 创建一个旋转器。我正在使用 CSS3 来控制淡入和淡出，使用 jQuery 来控制何时添加类。但是我不能让它工作。这是我当前代码如何不起作用的 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，它在台式机上看起来不错，但在移动设备上它会闪烁。我想将 CSS3 用于带有 jQ​​uery 的移动设备作为后备，但我无法让 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