使用jQuery在n隊列子元素內動畫

Question

我有下一個代碼正常工作。裏面我有一個元素，我需要動畫不透明，所以當李顯示然後文本顯示，只是爲了避免測試試圖填充李時，這是動畫，它看起來很醜。

一切我都試過不行

jQuery('.item2').waypoint(function(direction) { 
    jQuery(this).animate({'opacity':1},'fast', function(){ 


    jQuery(this).find('.article-info li').each(function() { 
    var li = jQuery(this); 
    jQuery(document).queue(function(n) { 
     li.animate(
     {width:'show'}, 
     {queue: true, duration: 150, specialEasing: {width: 'easeOutQuart'}, 
     complete:n//call the next item in the queue    
     }); 
    }); 
}); 
}); 

我已經沒有運氣

jQuery('.item2').waypoint(function(direction) { 
    jQuery(this).animate({'opacity':1},'fast', function(){ 
     jQuery(this).find('.article-info li').each(function() { 
      var li = jQuery(this); 
      jQuery(document).queue(function(n) { 
       li.animate(
        {width:'show'}, 
        {queue: true, duration: 150, specialEasing: {width: 'easeOutQuart'}  
        }).find('.titleofpost').animate({'opacity':1},{queue: true,complete:n//call the next item in the queue    
        }); 
      }); 
     }); 
    }); 
}); 

Answer 1

想這給一個嘗試CSS3和過渡效果

li { 
    -webkit-transition: -webkit-filter 2s ease-in-out; 
    -moz-animation: -moz-filter 2s; /* Firefox */ 
    -o-animation: -o-filter 2s; /* Opera */ 
} 
.animation { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
    filter: alpha(opacity=50); 
    -moz-opacity: 0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5; 
} 

然後，只需使用jQuery刪除/添加課程

$(this).addClass("animation"); 

它會給你一個美麗的動畫效果，沒有太多的JS編碼。