Animation temporisée avec jQuery

Question

http://i28.tinypic.com/2j0zbxi.gif http://i28.tinypic.com/2j0zbxi.gif

Est-ce possible via jQuery? Fondamentalement comme montré dans l'image ci-dessus, j'ai l'arrière-plan bleu, l'image de carte et les images de texte. Je veux réaliser ce type d'animation au chargement de la page ou quand cette image est chargée.

Answer 1

Vous devez utiliser une combinaison de animate() et de delay() pour synchroniser chaque diapositive. Voici un exemple de ce que j'ai récemment mis en place en utilisant ceci.

http://www.panthersweat.com/thursday/

Answer 2

Fondamentalement, c'est ce à quoi sert le .animate() de jQuery. Vous devrez exprimer tous les états/étapes d'animation nécessaires avec CSS, mais une simple animation comme celle ci-dessus ne devrait pas poser de problème.

http://api.jquery.com/animate/

Answer 3

Il existe différentes façons de montrer vos éléments en utilisant jQuery UI.

Ce lien contient quelques exemples: http://jqueryui.com/demos/show/

Answer 4

oui, vous pouvez le faire en mélangeant javscript et jquery ... je l'ai fait quelque chose dans une bannière quelque temps avant ..

le code suit

var timerCount = 1; 
var timer = setInterval('sliderController()',5000); 


function sliderController() { 
    status = changeSlide(timerCount); 
    if(status == 1) { 
     timerCount++; 
    } 
    else{ 
     timerCount = 1; 
    } 
} 

function changeSlide(timerCount) { 
    if(timerCount != 3) { 
     leftValue = -1004 * timerCount; 
     $('#banner_slider_container #banner_slides_container').stop().animate({'left':leftValue,'opacity':0.3},'slow',function() { 
      $('#banner_slider_container #banner_slides_container').animate({'opacity':1},'slow'); 
     }); 
     return 1; 
    } 
    else { 
     leftValue = 0; 
     $('#banner_slider_container #banner_slides_container').stop().animate({'left':leftValue,'opacity':0.3},'slow',function() { 
      $('#banner_slider_container #banner_slides_container').animate({'opacity':1},'slow'); 
     }); 
     return 0; 
    } 

} 

je pense que cela vous aidera .......

Answer 5

Depuis 1.4 jQuery a la fonction .delay() u peut utiliser dans des animations. Peut-être que c'est ce dont vous avez besoin?