如何在活动幻灯片上启动动画

Question

我是jQuery的初学者，我正在尝试自己学习它。但很明显我还遗漏了一些东西。我将非常感谢你的帮助。

我正在尝试创建一个带有动画内容的滑块，比如在幻灯片背景上滑动图像和文本，滑动在分隔器上等等。每次幻灯片更改(变成活动幻灯片)时，由于时间的流逝(它有自动运行)或箭头单击，内容都应该动画化。

我正在使用光滑滑块库(更多的信息这里)。每次幻灯片是可见的，它就会得到一个类“灵活-活动”。因此，我想我将创建一个脚本来做这样的事情：“每次幻灯片得到一个类‘光滑-活跃’，开始动画它的图像和文本”。我试过最简单的方法：

    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')});
    }

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

这是我的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);
});

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

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