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

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

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

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

1 个答案: