Question

我有下一个代码正常工作。在里面我有一个元素，我需要动画不透明度，所以当显示li然后文本显示，只是为了避免测试试图填充li时，这是动画，它看起来很难看。

我尝试的一切都不起作用

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编码。

使用jquery在n个队列子元素中进行动画处理

1 个答案: