光滑的轮播 + 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>

这是我现在得到的代码。 所以我制作了一个 Effect 序列，由 beforeChange 钩子触发。

当我转到下一张幻灯片时，它起作用了。但是当我在幻灯片之间快速移动并且一个序列仍在播放时，一切都变得疯狂并飞到屏幕上。

所以我想确保当前序列在执行下一个序列之前停止。 这就是我不知道该怎么做的地方。

有什么建议吗？

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