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 に答える