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

Question

我正在尝试运行每个轮播幻灯片上的一个功能，以便在每张幻灯片可见（活动）时一次显示视觉效果。

该函数向元素添加了一个 class，但它在页面加载或第三张幻灯片上不起作用（classes 已经添加）。

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

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

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

Codepen 在这里 http://codepen.io/Kerrys7777/pen/VpBvZW

Answer 1

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

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

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

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

jQuery execute function on each carousel slide one at a time

jquery

svg

carousel

css-transitions

twitter-bootstrap