时间戳

首页 > 解决方案 > 如何在活动幻灯片上开始动画

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

问题描述

我是 jQuery 的初学者，我正在尝试自己学习它。但很明显，我仍然错过了一些东西。我将非常感谢您的帮助。
我正在尝试创建一个带有动画内容的滑块，例如在幻灯片背景上滑动图像和文本，在分隔线中滑动等。内容应该在每次幻灯片更改（成为活动幻灯片）时进行动画处理（它具有自动运行功能） ) 或箭头单击。
我正在使用光滑的滑块库（更多信息在这里）。每当一张幻灯片是可见的，它就会获得一个“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>

预先感谢您的帮助。

标签： jqueryslider

解决方案

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

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

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

推荐阅读