如何在活动幻灯片上开始动画

Question

我是 jQuery 的初学者，我正在尝试自学。但很明显，我仍然错过了一些东西。我将非常感谢您的帮助。
我正在尝试创建一个带有动画内容的滑块，例如在幻灯片背景上滑动图像和文本、在分隔线中滑动等。由于时间过去，每次幻灯片更改（变为活动幻灯片）时，内容都应该动画（它具有自动运行）或箭头单击。
我正在使用光滑的滑块库（更多信息here）。每当一张幻灯片是可见的，它就会获得一个“slick-active”类。所以，我想我会创建一个脚本来做这样的事情：“每次幻灯片获得一个类'slick-active'时，开始 为其图像和文本设置动画”。我尝试了最简单的方法：

    if($(".my_slide").hasClass("slick-active")){
            $(".slick-active>.my_slide_divider").animate({'width':(($(".slick-active>.my_slide_title").width() + 60)+'px')});
        }

但是，显然，仅适用于第一张幻灯片。然后，我搜索了其他解决方案，找到了 MutationObserver 但失败了：

    var activeSlide = $(".slick-active");
        var observer = new MutationObserver(function(mutations) {
          mutations.forEach(function(mutation) {
            if (mutation.attributeName === "class") {
              var attributeValue = $(mutation.target).prop(mutation.attributeName);
            }
          });
        });
        observer.observe(activeSlide[0], {
          attributes: true
        });
    if (attributeValue == 'slick-active'){
        $(this).find('.my_slide_divider').animate({'width':(($(".slick-active>.my_slide_title").width() + 60)+'px')});
    }

所以我想请你帮我解决这个问题。如何在每次幻灯片将其类更改为“slick-active”时运行动画？
这是我的 HTML：

 <div class="variable-width">
        <span class="my_slide">
            <img class="my_slide_bg" src="img/pampers_bg_sharp.jpg" />
            <img src="img/pampers_1.png" alt="" class="my_slide_item" />
            <span class="my_slide_title">Pampers/P&G</span>
            <span class="my_slide_divider"></span>
            <span class="my_slide_description">Lorem ipsum dolor sit amet</span>
    <span class="my_slide">
            <img class="my_slide_bg" src="img/heinekken_bg_sharp.jpg" />
            <img src="img/heinekken_1.png" alt="" class="my_slide_item" />
            <span class="my_slide_title">Heinekken</span>
            <span class="my_slide_divider"></span>
            <span class="my_slide_description">Lorem ipsum dolor sit amet</span>
    <span class="my_slide">
            <img class="my_slide_bg" src="img/drgreen_bg_sharp.jpg" />
            <img src="img/drgreen_1.png" alt="" class="my_slide_item" />
            <span class="my_slide_title">dr Green</span>
            <span class="my_slide_divider"></span>
            <span class="my_slide_description">Lorem ipsum dolor sit amet</span>
        </span>

提前感谢您的帮助。

Answer 1

您可以使用平滑的滑块事件来执行此操作

$(".slider").on("afterChange", function (event, slick, currentSlide){
   $("<find your element>").animate({'width':(($(".slick-active>.my_slide_title").width() + 60)+'px')});
})

您需要从 currentSlide 参数中找到要设置动画的元素并在上面的行中使用它。

Answer 2

刚刚看了你的代码，你设置了一个事件监听器让你触发并检查你的条件吗？

例如在 slick 中，它在 doc -> 事件上：

// On swipe event
$('.your-element').on('swipe', function(event, slick, direction){
  console.log(direction);
  // left
});

// On edge hit
$('.your-element').on('edge', function(event, slick, direction){
  console.log('edge was hit')
});

// On before slide change
$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  console.log(nextSlide);
});

或者你的选择器在初始化光滑之后可能不起作用，$(".slick-active>.my_slide_divider")，你在这里使用了>，它只会影响.slick-active的孩子.my_slide_divider，而不是.slick-active中的所有.my_slide_divider。因为 slick.js 会在你的滑块上注入一个包装器，这是因为插件需要计算你的元素、窗口等的大小。

所以，如果以上两种解决方案都不起作用，请做一个演示给我们看。