Как мне сделать этот цикл кода? - PullRequest
Новая
       20

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

2 голосов
/ 08 ноября 2011

Я хотел бы знать, как сделать приведенный ниже цикл кода, я знаю, что мне нужен какой-то callback / 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() {
                    });
                });
            });
        });
    });
});

PS Этот код работает на готовом документе

Ответы [ 6 ]

6 голосов
/ 08 ноября 2011

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

(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 голос
/ 08 ноября 2011

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

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()
                    });
                });
            });
        });
    });
});
}
0 голосов
/ 08 ноября 2011

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

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 && step > 0) || (i <= 0 && step < 0) ) {
                step *= -1; i += step/2;
            }
            faders[i](); i += step;
            setTimeout(nextStep, timeout);
        };
    nextStep();
};

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

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

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

0 голосов
/ 08 ноября 2011

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

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/.

0 голосов
/ 08 ноября 2011 
(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 ("имя класса"). Не задавайте значения жестко, если вы не уверены, что вам никогда не придется их менять.

0 голосов
/ 08 ноября 2011

Возьми это из документа.Сделайте это своей собственной функцией и вызовите ее с помощью setInterval или setTimeout в документе.

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);// то же самое .... тайм-аут запускается один раз;интервал, навсегда

...