Как я могу каскадные анимации в JQuery - PullRequest
Новая
       16

Как я могу каскадные анимации в JQuery

1 голос
/ 15 декабря 2010

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

Я бы хотел, чтобы изображения постепенно исчезали одно за другим (промежуток в полсекунды перед запуском следующего блока), поэтому похоже, что они постепенно исчезают, я бы хотел, чтобы эффект затухания длился секунду, затемчтобы новое изображение внутри этого блока появилось, на это уходит около секунды, а следующее поле вызывает постепенное появление с промежутком в полсекунды.

У меня они циклические, но не каскадные,Может ли кто-нибудь предоставить мне решение проблемы?Ниже мой текущий код: 

<div id="box1"></div><div id="box2"></div><div id="box3"></div>
<script type="text/javascript">
//<![CDATA[
var test = ['img1.jpg','img2.jpg','img3.jpg'];
function loopImages()
{
    // swap image positions in array
    var fimg = test.shift();
    test.push(fimg);
    for (a in test) {
        var newimage = $('<img />').attr('src',test[a]);
        var currbox = $('#box' + (Math.floor(a)+1));
        //first fade out
        currbox.find('img').fadeTo('slow',0);
        // then add new image
        currbox.empty().append(newimage);   
    }
    // loop every 5 seconds
    setTimeout("loopImages()",5000);
}
loopImages();
//]]>
</script>

Ответы [ 3 ]

3 голосов
/ 15 декабря 2010

Примерно так должно получиться: 

var test = ['img1.jpg','img2.jpg','img3.jpg'];
function loopImages() {
    var fimg = test.shift();
    test.push(fimg);
    $.each(test, function(i, img) {
        var newimage = $('<img />').attr('src',img);
        $('#box' + (i+1)).find('img').delay(i*1000).fadeTo('slow',0, function() {
          $(this).html(newimage); //shortcut for .empty().append()
        });
    });
    setTimeout(loopImages, 5000);
}
$(loopImages);

Используя .delay() и умножая на индекс, в котором вы находитесь в массиве, ваша анимация будет в шахматном порядке. Кроме того, вы хотите выполнить операции по изменению после завершения затухания, как я полагаю, поэтому сделайте это в обратном вызове .fadeTo().

Другие изменения: запуск loopImages, когда документ готов, передача ссылки (не строки) в setTimeout() и использование традиционного цикла for для повторения по массиву (не используйте for...in здесь, это для перечисления ).

1 голос
/ 15 декабря 2010

Попробуйте сначала создать изображения в HTML, затем используйте что-то вроде этого: 

(function($) {
    $.fn.fadeImages = function(repeatTime, timeBetweenBoxes, boxExistanceTime) {
        var images = this.children('img').hide();
        runFade = function() {
            images.each(function(i) {
                var image = this;
                window.setTimeout(function() { $(image).fadeIn();  }, i * timeBetweenBoxes);
                window.setTimeout(function() { $(image).fadeOut(); }, i * timeBetweenBoxes + boxExistanceTime);
            });
        };
        window.setInterval(runFade, repeatTime);
        runFade();
        return this;
    };
})(jQuery);

jQuery(function($) {
    $('#box1,#box2,#box3').fadeImages(5000, 1000, 1100);
});

Настройте время вызова функции для получения желаемого результата.

Редактировать: добавлено return this; для поддержки цепочки.

0 голосов
/ 15 декабря 2010

Мне пришлось сделать некрасивую попытку взломать отличное решение Ника, чтобы оно остановило ошибку перезаписи переменной newimage, которая всегда была результатом самого последнего цикла (i == test.length), которыйказалось уничтожить все изображения, кроме последнего.Если у кого-то есть более подходящее решение, чем мой взлом, не стесняйтесь писать! 

<div id="box1"><img src="1.jpg" /></div><div id="box2"><img src="2.jpg" /></div><div id="box3"><img src="3.jpg" /></div>
<script type="text/javascript">
//<![CDATA[
var test = ['1.jpg','2.jpg','3.jpg'];
var imagearr = [];
function loopImages() {
    var fimg = test.pop();
    test.unshift(fimg);
    for (var i=0; i<test.length; i++) {
        var container = '#box' + (i+1);
        imagearr[i] = $(container);
        imagearr[i].find('img').data('count',i).delay(i*400).fadeTo('fast',0, function() {
          var i = $(this).data('count');
          var suffix = (i == 0) ? '' : '_small';
          var newimage = $('<img />').attr('src',test[i]);
          imagearr[i].html(newimage);
          newimage.css('opacity',0).fadeTo('slow',1);
        });
    }
    setTimeout(loopImages, 1000 * test.length + 3000);
}
$(loopImages);
//]]>
</script>
...