Slick Carousel + Velocity.js

Question

Velocity.jsエフェクトをSlick Carouselプラグインに組み合わせたいと思っています。

スリック：http://kenwheeler.github.io/slick/ 速度：http://julian.com/research/velocity/

これは正常に動作しているが、奇妙な副作用があります：

<script> 
     $(function() { 
      $('.teaser').on('init', function(event, slick){ 
       createSequence(0); 
      });    
      $('.teaser').on('beforeChange', function(event, slick, currentSlide, nextSlide){ 
       createSequence(nextSlide); 
      });    
      $('.teaser').slick({ 
       autoplay: true, 
       autoplaySpeed: 10000, 
       });    
      function createSequence(slideId) { 
       var $e = $('.slick-slide[data-slick-index='+slideId+']'); 
       $e.velocity("stop"); 
       var mySequence = [ 
        { e: $e.find('.teaserImg'), p: "transition.swoopIn", o: { duration: 500, sequenceQueue: false } },      
        { e: $e.find('.boxTitle'), p: "transition.bounceUpIn", o: { duration: 500, sequenceQueue: false } }, 
        { e: $e.find('.projectTitle'), p: "transition.bounceLeftIn", o: { duration: 1000, sequenceQueue: false } }, 
        { e: $e.find('.teaserTitle'), p: "transition.bounceRightIn", o: { duration: 1000, sequenceQueue: false } },       
        { e: $e.find('.teaserText'), p: "transition.fadeLeftBigIn", o: { duration: 500, sequenceQueue: false } }, 
        { e: $e.find('.teaserBtn'), p: "transition.fadeRightBigIn", o: { duration: 1000, sequenceQueue: false } } 
       ]; 
       $.Velocity.RunSequence(mySequence); 
      } 
     }); 
    </script> 

は、これは私が今だコードです。 したがって、フックbeforeChangeでトリガーされるエフェクトシーケンスを作成します。

私は次のスライドに行くと動作します。しかし、私がスライド間で速く進むと、1つのシーケンスがまだ再生されていると、すべてがうまく動き、画面に飛んでいきます。

したがって、次のシーケンスを実行する前に現在のシーケンスが停止していることを確認します。 これは私がそれをする方法を知らないところです。

ヒント？

Answer 1

アニメーションキューを$e.velocity("stop", true);でクリアし、アニメーションを元に戻します。

私は、各要素にCSSクラス（.animated）を追加して、アニメーションをクリアしてリセットします。

function createSequence(slideId) { 
       var $e = $('.slick-slide[data-slick-index='+slideId+']'); 

       $e.find('.animated').each(function (index, element) { 
        $(element).velocity('stop', true); 
        $(element).velocity('reverse', {duration: 1}); 
       }); 

       var mySequence = [ 
        { e: $e.find('.teaserImg'), p: "transition.swoopIn", o: { duration: 500, sequenceQueue: false } },      
        { e: $e.find('.boxTitle'), p: "transition.bounceUpIn", o: { duration: 500, sequenceQueue: false } }, 
        { e: $e.find('.projectTitle'), p: "transition.bounceLeftIn", o: { duration: 1000, sequenceQueue: false } }, 
        { e: $e.find('.teaserTitle'), p: "transition.bounceRightIn", o: { duration: 1000, sequenceQueue: false } },       
        { e: $e.find('.teaserText'), p: "transition.fadeLeftBigIn", o: { duration: 500, sequenceQueue: false } }, 
        { e: $e.find('.teaserBtn'), p: "transition.fadeRightBigIn", o: { duration: 1000, sequenceQueue: false } } 
       ]; 
       $.Velocity.RunSequence(mySequence); 
     } 

ソース：Velocity.js stop command