提问人:SativaNL 提问时间:10/27/2015 最后编辑:JavaSheriffSativaNL 更新时间:11/6/2015 访问量:1567
光滑的旋转木马 + Velocity.js
Slick Carousel + Velocity.js
问:
我想将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 序列,该序列由 hook beforeChange 触发。
当我转到下一张幻灯片时,它起作用了。但是当我在幻灯片之间快速切换并且一个序列仍在播放时,一切都变得疯狂并飞向屏幕。
因此,我想确保当前序列在执行下一个序列之前停止。 这就是我不知道该怎么做的地方。
有什么提示吗?
答:
0赞
Kaalras
11/5/2015
#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);
}
source : Velocity.js停止命令
评论
0赞
SativaNL
11/9/2015
我试过了,但它仍然不起作用。也许我没有正确添加动画类。你是怎么做到的?Thnx
评论