jQuery 在每个轮播幻灯片上执行函数，一次一张

Question

我试图在每张轮播幻灯片上一次运行一个函数，以便在每张幻灯片可见（活动）时获得视觉效果。

该函数向元素添加一个类，但它不适用于页面加载或第三张幻灯片（已添加类）。

在第二个轮播项目上工作正常。

$('#carousel').on('slide.bs.carousel', function () {
    //console.log('slide event!');

    var arr = $('.carousel-item .text .st0').get();
    setTimeout(function delayMainFunction() {

        function random(arr) {
            if (!arr.length) {
                return;
            }
            var el = arr.splice(Math.floor(Math.random() * arr.length), 1);
            $(el).attr('class', 'st0 transition-state');
            setTimeout(function () {
                random(arr);
            }, 10 + Math.floor(Math.random() * 10))
        }
        random(arr);

    }, 600)
});

应在可见（活动）时为每张幻灯片执行此转换。

在这里写代码http://codepen.io/Kerrys7777/pen/VpBvZW

Answer 1

我为你的函数命名...
这使您可以从任何地方调用它。

所以现在，您可以像任何其他函数一样在加载时调用它。
我添加了一个 setTimeout 来删除 SVG 的所有字母的 transition-state 类。

Your CodePen updated.

console.clear();

$( document ).ready(function() {

  // Made it a named function
  var myAnimation = function(){
    console.log('slide event!');

    var arr = $('.carousel-item .text .st0').get();
    setTimeout(function delayMainFunction() {

      function random(arr) {
        if (!arr.length) {
          return;
        }
        var el = arr.splice(Math.floor(Math.random() * arr.length), 1);
        $(el).attr('class', 'st0 transition-state');
        setTimeout(function () {
          random(arr);
        }, 10 + Math.floor(Math.random() * 10))
      }
      random(arr);

      // Added setTimeout to remove the transition-state class from all SVG letters
      setTimeout(function() {
        $('.carousel-item .text .st0').removeClass('transition-state');
      },3500);

    }, 600);
  };


  $('.carousel').carousel({
    interval: 6000,
    pause: false
  })

  // To run on load
  myAnimation();

  // To bind the function the carousel event
  $(".carousel").on('slide.bs.carousel', myAnimation);
});