3 перехода, pausetime между переходами

Я хочу получить:

fadeOut 1° image -> fadeIn 1° image -> WAIT 2 SECONDS ->fadeOut 2° image -> fadeIn 2° image -> WAIT 2 SECONDS -> fadeOut 3° image -> fadeIn 3° image -> WAIT 2 SECONDS -> fadeOut 1° image......

Вот код:

<div class="container">









</div>

JS:

var numberOfGroups = 3;
var arrayOfArray = new Array(numberOfGroups);
for(var i = 0; i < numberOfGroups; i++)
{
    arrayOfArray[i] = new Array();
}
var imagesElements = $('.container').children();
imagesElements.each(function(localIndex){
    //partiziono le immagini in insiemi in base all'ordine in cui le trova in partenza
    arrayOfArray[localIndex % numberOfGroups].push(imagesElements[localIndex]);
});
$('.container').empty();
for(var j = 0; j < arrayOfArray.length; j++)
{
    //crea un nuovo div contenitore contenente le immagini come sono nell'array 2-dimensioni creato
    var newDivContainer = document.createElement('div');
    newDivContainer.setAttribute('id', 'block_'+j);
    for(var k = 0; k < arrayOfArray[j].length; k++)
    {
        newDivContainer.appendChild(arrayOfArray[j][k]);
    }

    $('.container').append(newDivContainer);
}

var newGroups = $('.container').children();
newGroups.each(function(thisIndex){
    $(newGroups[thisIndex]).cycle({
        fx:     'fade',
        delay: 2000,
        speed: 2000,
        //continuous: 1,
        timeout: 2000*numberOfGroups,
        //sync: 0,
        after: function(){
            var x = '#block_'+((thisIndex+1) % numberOfGroups);
            change(x);
            //window.setTimeout(change, 4000, x);
        }
    });
});

function change(what)
{
    jQuery(what).cycle("next");
}

JSFIDDLE: http://jsfiddle.net/linuxatico/5e7X7/

1
nl ja de
Пожалуйста, изменитесь, вы комментируете в коде английскому языку.
добавлено автор Jonny Sooter, источник
Пожалуйста, изменитесь, вы комментируете в коде английскому языку.
добавлено автор Jonny Sooter, источник

2 ответы

Все, что действительно необходимо сделать, установлено задержка и варианты перерыва соответственно. Можно использовать индекс каждой группы, чтобы увеличить начальный выбор задержки и затем вычесть полное время анимации из него так запуски анимации немедленно. Пример:

var animationDelay = 4000*numberOfGroups - 2000; 
$("#test").cycle({ 
    delay: (4000 * thisIndex) - animationDelay,
    speed: 2000,
    timeout: animationDelay
});

Updated the fiddle for you, should be what you're looking for: http://jsfiddle.net/5e7X7/3/

8
добавлено
Спасибо, it' s, что я искал.
добавлено автор linuxatico, источник

Все, что действительно необходимо сделать, установлено задержка и варианты перерыва соответственно. Можно использовать индекс каждой группы, чтобы увеличить начальный выбор задержки и затем вычесть полное время анимации из него так запуски анимации немедленно. Пример:

var animationDelay = 4000*numberOfGroups - 2000; 
$("#test").cycle({ 
    delay: (4000 * thisIndex) - animationDelay,
    speed: 2000,
    timeout: animationDelay
});

Updated the fiddle for you, should be what you're looking for: http://jsfiddle.net/5e7X7/3/

8
добавлено
Спасибо, it' s, что я искал.
добавлено автор linuxatico, источник
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском