Question

我需要使用CSS3和jQuery创建一个旋转器。我正在使用CSS3控制淡入淡出和使用jQuery来控制何时添加类。但是，我不能让这个工作。 Here is a 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，它在台式机上看起来很不错，但在移动设备上flickers。我想将CSS3用于带有jQuery的移动设备用于后备，但是我无法通过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 -->

为什么我的代码不起作用，如何创建我正在使用的效果类型？

将jQuery与CSS3动画结合使用

0 个答案: