Question

我是jQuery的初学者，我想自己学习。但是很明显，我仍然缺少一些东西。我将非常感谢您的帮助。
我正在尝试创建一个带有动画内容的滑块，例如在幻灯片背景顶部的图像和文本中滑动，在分隔线中滑动等内容。由于时间的流逝，每次幻灯片更改（成为活动幻灯片）时，该内容都应具有动画效果（具有自动运行功能）或单击箭头。
我正在使用光滑的滑块库（更多信息here）。每次看到一张幻灯片时，都会得到一个“滑动活跃”类。因此，我认为我将创建一个脚本来执行以下操作：“每当幻灯片获得“滑动激活”类时，就开始动画其图像和文本。”我尝试了最简单的方法：

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

否则，选择器可能在$(".slick-active>.my_slide_divider")初次启动后使用了>，可能只适用于.slick-active的孩子.my_slide_divider，而不是全部.my_slide_divider中的.slick-active。由于slick.js将在您的滑块上注入包装器，这是因为该插件需要计算元素，窗口等的大小。

因此，如果以上两种解决方案均无效，请进行演示以向我们展示。

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

2 个答案: