Как мне создать этот цикл кода?

ProgramBox

Как мне создать этот цикл кода?

Post author:admin
Запись опубликована:5 апреля, 2023
Post category:Вопросы по программированию

#jquery #loops #callback #setinterval

#jquery #циклы #обратный вызов #setinterval

Вопрос:

Я хотел бы знать, как создать приведенный ниже цикл кода, я знаю, что мне нужен какой-то обратный вызов / setInterval, но как мне это реализовать? Большое спасибо!

 $('.1').fadeIn(2500, function() {
    $('.2').fadeIn(2500, function() {
        $('.3').fadeIn(2500, function() {
            $('.3').fadeOut(2500, function() {
                $('.2').fadeOut(2500, function() {
                    $('.1').fadeOut(2500, function() {
                    });
                });
            });
        });
    });
});

P.S. Этот код выполняется в готовом документе

Ответ №1:

Основываясь на комментариях OP, это должен быть бесконечный цикл затухания при выходе. Попробуйте следующее

 (function () {
  var all = [1, 2, 3];
  var rev = all.reverse();

  var doFadeOut = function (index) {
    $('.'   rev[index]).fadeOut(2500, function () {
      index  ;
      if (index < rev.length) {
        doFadeOut(index);
      } else {
        doFadeIn(0);
      }
    });
  };

  var doFadeIn = function (index) {
    $('.'   all[index]).fadeIn(2500, function () {
      index  ;
      if (index < all.length) {
        doFadeIn(index);
      } else {
        doFadeOut(0);
      }
    });
  };

  doFadeIn(0);
})();

1. Гораздо лучший шаблон. Глубоко вложенный анимационный код — плохая идея.

2. Спасибо за отличный ответ, хотя он не делал того, что я хотел (анимация не была бесцветной, я думаю, пропускает затухание в конце), я знаю, что моя вложенность была плохой практикой, но она сработала для того, что я хотел, и мой код будет использоваться только как одноразовый.

3. @Luke: Я немного опаздываю на вечеринку, и мой ответ не совсем серьезен, но он работает, и анимация плавная. 😉

Ответ №2:

Просто поместите все это в функцию, а затем вызовите саму эту функцию:

 function doFade(){
$('.1').fadeIn(2500, function() {
    $('.2').fadeIn(2500, function() {
        $('.3').fadeIn(2500, function() {
            $('.3').fadeOut(2500, function() {
                $('.2').fadeOut(2500, function() {
                    $('.1').fadeOut(2500, function() {
                         doFade()
                    });
                });
            });
        });
    });
});
}

1. Я не понимаю вопроса. Разве вы не сделали бы то же самое, что и при наличии 3, за исключением того, что вы бы добавили / убрали еще 3 элемента

2. Это то, что мне нужно быстро собрать, я только на начальном уровне. Я попробую это, спасибо.

3. @maxedison: Я говорю, что это решение вообще не масштабируется. Если у вас есть 100 элементов, вам придется вручную ввести все это.

4. Это сработало просто отлично. Я знаю, что вы говорите, и это не очень хорошая практика, но это намного быстрее, и то, что я делаю, требует анимации только для 3 элементов.

5. @Blender — определенно вообще не масштабируется. Но ОП не предполагал, что у него было более 3 элементов или что в будущем это может вырасти до чего-то большего.

Ответ №3:

Извлеките его из document.ready. Создайте собственную функцию и вызовите ее с помощью setInterval или setTimeout в document.ready:

 function myCrazyLoop() {
    $('.1').fadeIn(2500, function() {
        $('.2').fadeIn(2500, function() {
           $('.3').fadeIn(2500, function() {
                $('.3').fadeOut(2500, function() {
                   $('.2').fadeOut(2500, function() {
                       $('.1').fadeOut(2500, function() { });
                   });
                });
           });
        });
    });
}

затем в document.ready:

 setInterval('myCrazyLoop()',x); // where x is your interval in miliseconds

или
setTimeout(‘myCrazyLoop()’,x); // то же самое …. время ожидания выполняется один раз; интервал, навсегда

Ответ №4:

 (function () {
  var all = [1, 2, 3];
  var rev = all.reverse();

  var doFadeOut = function (index) {
    $('.'   rev[index]).fadeOut(2500, function () {
      index  ;
      if (index < rev.length) {
        doFadeOut(index);
      } else {
        doFadeIn(0);
      }
    });
  };

  var doFadeIn = function (index) {
    $('.'   all[index]).fadeIn(2500, function () {
      index  ;
      if (index < all.length) {
        doFadeIn(index);
      } else {
        doFadeOut(0);
      }
    });
  };

  doFadeIn(0);
})();

Для меня выглядит довольно неплохо. только я бы создал массив с помощью jQuery(«classname»).
Не вводите значения жестко, если вы не уверены, что вам никогда не понадобится их изменять.

Ответ №5:

Вот способ сделать это, когда вы просто передаете массив имен классов, и он будет циклически перемещаться вверх и вниз по массиву:

 var classNameSequence = ["a", "b", "c", "d", "e", "f"];

function runSequence(sequence) {
    var next = 0;

    function doFadeIn() {
        if (next >= sequence.length) {
            --next;
            doFadeOut();
            return;
        }
        $("."   sequence[next  ]).fadeIn(2500, doFadeIn);
    }

    function doFadeOut() {
        if (next < 0) {
            next = 0;
            doFadeIn();
            return;
        }
        $("."   sequence[next--]).fadeOut(2500, doFadeOut);
    }

    doFadeIn();
}

runSequence(classNameSequence);

Вы можете увидеть, как это работает здесь:http://jsfiddle.net/jfriend00/cRZxk /.

Ответ №6:

Черт возьми, вот сумасшедший способ сделать это.

 var cycle = function(selector, timeout) {
    var i = 0, step = 2,
        faders = $(selector).map(function (i, val) {
            return [
                function() { $(val).fadeIn(timeout) },
                function() { $(val).fadeOut(timeout) }
            ];
        }),
        nextStep = function() {
            if ( (i >= faders.length amp;amp; step > 0) || (i <= 0 amp;amp; step < 0) ) {
                step *= -1; i  = step/2;
            }
            faders[i](); i  = step;
            setTimeout(nextStep, timeout);
        };
    nextStep();
};

Назовите это как:

 cycle(['.c1', '.c2', '.c3'], 1000);

Смотрите демонстрацию на jsFiddle.