jquery waypoint动画每个li fadeup

时间:2017-05-09 01:46:57

标签: jquery animation jquery-waypoints animate.css

当我向下滚动页面时,我试图使用jquery waypoint对每个li进行淡入淡出。我无法让每个李工作。

以下是代码:

  $('ul.animated li').each(function(){
    $(this).waypoint(function(){
      $(this).addClass('fadeInUp');
    },{
      offset:'100%'
    });
  });

<ul class="no-margin animated">
    <li><a href="/our-services/business-and-commercial-law.html">Business &amp; Commercial Law <i class="fa fa-check"></i></a></li>
    <li><a href="/our-services/business-and-commercial-law/banking-and-finance.html">Banking &amp; Finance <i class="fa fa-check"></i></a></li>
    <li><a href="/our-services/business-and-commercial-law/commercial-contracts-and-agreements.html">Commercial Contracts &amp; Agreements <i class="fa fa-check"></i></a></li>
    <li><a href="/our-services/debt-recovery-and-insolvency.html">Debt Recovery &amp; Insolvency <i class="fa fa-check"></i></a></li>
    <li><a href="/our-services/debt-recovery-and-insolvency/debt-recovery.html">Debt Recovery <i class="fa fa-check"></i></a></li>
    <li><a href="/our-services/debt-recovery-and-insolvency/insolvency.html">Insolvency <i class="fa fa-check"></i></a></li>
    <li><a href="/our-services/property-law.html">Property Law <i class="fa fa-check"></i></a></li>
    <li><a href="/our-services/property-law/real-estate.html">Real Estate <i class="fa fa-check"></i></a></li>
    <li><a href="/our-services/property-law/leases.html">Leases <i class="fa fa-check"></i></a></li>
    <li><a href="/our-services/litigation-and-dispute-resolution.html">Litigation &amp; Dispute Resolution <i class="fa fa-check"></i></a></li>
    <li><a href="/our-services/wills-and-estates.html">Wills &amp; Estates <i class="fa fa-check"></i></a></li>
    <li><a href="/our-services/wills-and-estates/estate-planning-and-wills.html">Estate Planning &amp; Wills <i class="fa fa-check"></i></a></li>
    <li><a href="/our-services/wills-and-estates/probate-and-estate-administration.html">Probate &amp; Estate Administration <i class="fa fa-check"></i></a></li>
    <li><a href="/our-services/wills-and-estates/estate-litigation.html">Estate Litigation <i class="fa fa-check"></i></a></li>
</ul>

我不确定如何让它发挥作用,如果有人可以提供帮助,那就太棒了。

1 个答案:

答案 0 :(得分:0)

我用它来工作:

$('ul.animated li').each(function(){
    var $el = $(this);
    $el.waypoint(function(){
      $el.addClass('fadeInUp');
    },{
      offset:'100%'
    });
  });