3 transitions, pause entre les transitions

Je veux obtenir:

fadeOut 1 ° image -> fadeIn 1 ° image -> ATTENDRE 2 SECONDES -> fadeOut 2 ° image -> fadeIn 2 ° image -> WAIT 2 SECONDES -> fadeOut 3 ° image -> fadeIn 3 ° image -> WAIT 2 SECONDES – > fadeOut 1 ° image ……

Voici le code:

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/

Tout ce que vous avez vraiment besoin de faire est de définir les options de délai et de délai d’expiration de manière appropriée. Vous pouvez utiliser l’index de chaque groupe pour augmenter l’option de délai initial, puis en soustraire le temps total d’animation afin que votre animation démarre immédiatement. Exemple:

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

Le violon mis à jour pour vous, devrait être ce que vous cherchez: http://jsfiddle.net/5e7X7/3/