功能只运行一次

Question

我的功能只运行一次。它只包含css。

我正在尝试让分隔符在动画中展开，当添加类时。我在尝试，但我不能。我需要这个jquery代码在特定幻灯片变为活动时执行。任何人都知道该怎么做？ 我想把它放在Materialise Slide上。 我有以下JQuery代码。他很简单。

HTML

 <section class="section-slide">
        <div class="slider">
            <ul class="slides">
                <li class="lista-slider">
                    <img src="img/music10.jpeg" class="responsive-img"> 
                    <div class="caption center-align top-setting">
                        <h3>Text1</h3>
                        <div class="divider-cap divider"></div>
                        <h5 class="light grey-text text-lighten-3">Test1</h5>   
                    </div>
                </li>

                <li class="slide-2 lista-slider">
                    <img src="img/music12.jpeg" class="responsive-img"> 
                    <div class="caption center-align center-setting">
                      <h3>Test 2</h3>
                    </div>
                </li>

                <li class="lista-slider">
                    <img src="img/music4.jpg" class="responsive-img"> 
                    <div class="caption right-align right-setting">
                      <h3>Text 3 </h3>
                      <h5 class="light grey-text text-lighten-3">Test 3</h5>
                    </div>
                </li>
                <li class="lista-slider">
                    <img src="img/music9.jpeg" class="responsive-img"> 
                    <div class="caption center-align">
                      <h3>This is our big Tagline!</h3>
                      <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
                    </div>
                </li>
            </ul>
        </div>
    </section>

JQUERY

$(window).on('load', function(){    
        var slideDivider = $('.slider .divider-cap')
        var sliderList = $('.slider ul li:eq(0)')   

        if(sliderList.hasClass('active'))
        {
            slideDivider.addClass('divider')    
        }
        else{
            slideDivider.removeClass('divider')
        }
    });

CSS

  .section-slide .slider .top-setting .divider{
      width: 600px;
      margin: auto;
      animation: dividerAnim 1s 1;
  }

 @-webkit-keyframes dividerAnim{
    0%   {width: 0px;}
    100% {top: 600px;}
}

 @keyframes dividerAnim{
    0%   {width: 0px}
    100% {width: 600px;}
}