0

我有下一个代码正常工作。在 li 内部，我有一个元素需要为不透明度设置动画，因此当显示 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             
                    });
            });
        });
    });
});
4

1 回答 1

0

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

于 2013-07-30T12:42:30.453 回答