jquery 向slick.js滑块上的文本添加动画

dly7yett  于 2023-02-15  发布在  jQuery
关注(0)|答案(2)|浏览(164)

我正在尝试在slick.js滑块上添加动画(利用animate.css)到一些文本中。动画可以工作,但必须先显示,然后再执行动画。下面是我正在工作的网站:http://dentiq.godigitaldev.com/
下面是我的slick.js代码:

$(document).ready(function(){
        $('.featured-wrap').slick({
            infinite: true,
            speed: 400,
            autoplaySpeed: 6000,
            autoplay: true,
            fade: true,
            slide: 'div',
            cssEase: 'linear',
            dots: true,
            arrows: true,
            pauseOnHover: false,
            adaptiveHeight: true,
            onBeforeChange: function() {
                $('.slick-active > .display').addClass('animated fadeInDown');
                $('.slick-active > .display').addClass('hidden');
            },
            onAfterChange: function() {
                $('.slick-active > .display').removeClass('hidden');
                $('.slick-active > .display').addClass('animated fadeInDown');
            }
        });

.hidden类简单地说就是:.hidden {显示:无;}

ao218c7q

ao218c7q1#

您的文本块位于移动的动画滑块内部。请尝试将它们移到外部容器中。在这种情况下,您可以通过类或索引访问它们。
例如:

$('.all-displays > .display').eq($('.slick-active').index()).addClass('animated fadeInDown');
jyztefdp

jyztefdp2#

文本内部使用sass

.header-slider-item-content {
    opacity: 0;
    transition: all 3s;
  }
.slick-active {
  .header-slider-item-content {
    opacity: 1;
    transition: all 3s;
  }
}

相关问题