используйте jQuery для поворота div с помощью setTimeout - PullRequest
Новая
       25

используйте jQuery для поворота div с помощью setTimeout

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

Все, У меня есть этот код: 

var speed= 1000,
num = 1,
timer;

(function rotate() {
    var container_footer = jQuery("#rotate_container");
    var divs_footer = container_footer.children();
    var divs_footer_length = divs_footer.length;
    $("#item"+num).stop(true, true).fadeIn(speed).delay(speed).fadeOut(speed);;
    num>divs_footer_length  ? num=0 : num++;
    timer = setTimeout(rotate, speed*3);
})();

Это хорошо работает и поворачивает изображения. Тем не менее, он исчезает из div, как только он отображается, и добавляет другой div. То, что я хотел бы сделать, - это появление div в зависимости от переменной скорости, затем его отображение в течение 15 секунд, а затем исчезновение со скоростью. Переменная, а затем исчезнуть еще один делитель в переменной скорости и будет отображаться в течение 15 секунд и т. д. Любые идеи о том, как это сделать, будет принята с благодарностью? Спасибо!

Ответы [ 2 ]

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

Вы можете использовать обратный вызов, который происходит в fadeOut, и использовать небольшую рекурсию, чтобы перебрать ваши div. Это будет хорошо работать, если у вас установлен лимит div. Ниже у меня работает даже задержка. 

        var rotate, speed= 1000;

        rotate = function (itemNum) {
            $("#item" + itemNum).stop(true, true).fadeIn(speed).delay(speed).fadeOut(speed, function () {
                //callback when fadeOut completes
                rotate(itemNum + 1);
            });
        }
         rotate(1);
0 голосов
/ 17 ноября 2011

Вместо того, чтобы появляться, ждать и исчезать, вы можете сделать так, чтобы функция поворота просто исчезла, а затем исчезла в следующем.Итак, начните с того, что первое изображение уже отображается, затем вызовите setTimeout для rotate ().Пример: 

var speed= 1000,
num = 1,
timer = setTimeout(rotate, 15000); //15 seconds as requested

function rotate() {
    var container_footer = jQuery("#rotate_container");
    var divs_footer = container_footer.children();
    var divs_footer_length = divs_footer.length;
    $("#item"+num).fadeOut(speed);
    num>divs_footer_length  ? num=0 : num++;
    $("#item"+num).fadeIn(speed);
    timer = setTimeout(rotate, 15000);
};
...