gpt4 book ai didi

javascript - 单击幻灯片更改时延迟动画

转载 作者:行者123 更新时间:2023-11-28 04:09:05 25 4
gpt4 key购买 nike

我有一个使用淡入淡出过渡的光滑 slider 。每张事件幻灯片都有一个缩放幻灯片背景图像的动画。当幻灯片发生变化时,动画将从幻灯片中移除。

当手动点击新幻灯片时,在转换完成之前,比例会跳回默认大小,从而在图像上创建跳转。我的问题是如何延迟动画的移除,这样我就不会跳回默认比例?

代码如下,您可以在此处查看示例:http://tesla.uk-cpi.com/

JS

// Slider on Home Page
$('.homeSlider').slick({
draggable: true,
autoplay: true,
autoplaySpeed: 7000,
arrows: false,
dots: true,
fade: true,
speed: 500,
infinite: true,
cssEase: 'linear',
touchThreshold: 100,
customPaging : function(homeSlider, i) {
var title = $(homeSlider.$slides[i]).data('title');
var number = $(homeSlider.$slides[i]).data('index-number');

return '<a class="pager__item" onClick=reset()><div class="slide-number">'+number+'</div><div class="slide-title">'+title+'</div></a>';
},
});

$('.slick-active .item').addClass('kenburnseffect');

$('.homeSlider').on('afterChange', function(event, slick, currentSlide){
$('.item').removeClass('kenburnseffect');
$('.slick-active .item').addClass('kenburnseffect');
});

CSS

  .item {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}

@-webkit-keyframes kenburns {
from {
-webkit-transform: scale(1.1);
}
to {
-webkit-transform: scale(1);
}
}
@keyframes kenburns {
from {
transform: scale(1.1);
}
to {
transform: scale(1);
}
}

最佳答案

使用setTimeout,

$('.homeSlider').on('afterChange', function(event, slick, currentSlide){
setTimeout(function(){
$('.item').removeClass('kenburnseffect');
$('.slick-active .item').addClass('kenburnseffect');
},1000);
});

这里给定延时1000毫秒

关于javascript - 单击幻灯片更改时延迟动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42809070/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com