jQuery GIF Animations

Question

Je cherche à utiliser jQuery pour supprimer le besoin d'utiliser un GIF pour créer une animation assez simple.

Ce que je veux, c'est une image à quatre étages. 1) Rien montrant 2) La première partie de l'image 3) Deuxième partie de l'image 4) Troisième partie de l'image - Recommencer

Je pensais que je avais besoin de créer les étapes d'image puis utilisez une technique de remplacement de l'image actuelle avec jQuery pour créer l'animation. Cela pourrait être assez facile avec les rappels.

La partie suivante consiste à faire apparaître cette animation à plusieurs endroits après le chargement de l'animation précédente. Encore une fois, pourrait être facile avec des rappels.

J'avais quelques réflexions à ce sujet. Est-ce stupide de ne pas simplement utiliser les GIF? Ou cela pourrait-il être fait avec jQuery?

Answer 1

D'abord, vous pouvez utiliser l'arrière-plan de plusieurs div mettant la partie de l'image dont vous avez besoin

css_background-position

Ensuite, vous devez montrer la div que vous devez être affiché en fonction du type d'animation dont vous avez besoin .

Answer 2

Utilisez des GIF animés - c'est pour cela qu'ils sont conçus. Je suis sûr qu'il est possible de bidouiller une solution en utilisant JQuery, mais vous paieriez un coût supplémentaire en temps de développement et en complexité. En outre, vous devez reconnaître qu'en utilisant une solution JQuery/CSS personnalisée, vous prenez la décision de coupler étroitement votre animation à la page sur laquelle elle est activée. Que faire si quelqu'un veut inclure l'animation sur une autre page? Ils devraient copier sur un tas de code au lieu d'un seul fichier GIF. Que se passe-t-il si quelqu'un veut l'inclure dans un courriel ou une présentation Powerpoint? Ne peut pas être fait ...

Answer 3

Si cela va être constant et non axé sur les événements, je vous recommande d'utiliser des gifs.

Si, cependant, l'animation est en réponse à quelque chose se passe sur la page, ou si vous voulez seulement qu'elle démarre après que tout soit chargé, alors jquery est probablement le chemin à parcourir.

Vous devriez pouvoir changer la source d'image (ou le décalage de position si vous utilisez une seule image) pour changer l'image. Jetez un oeil à some "pause" options dans jQuery pour retarder les changements entre les images.

exemple Untested (dérivé de la réponse de Simon dans le lien ci-dessus):

function chg1() { $('#myimage').attr('src', ''); } 
function chg2() { $('#myimage').attr('src', 'image1src.jpg'); } 
function chg3() { $('#myimage').attr('src', 'image2src.jpg'); } 
function chg4() { $('#myimage').attr('src', 'image3src.jpg'); } 

function StartAnimation() { 
    setTimeout(chg1, 2000); // blank after 2 seconds 
    setTimeout(chg2, 4000); // img 1 after 4 seconds 
    setTimeout(chg3, 6000); // img 2 after 6 seconds 
    setTimeout(chg4, 8000); // img 3 after 8 seconds 
    setTimeout(StartAnimation, 8000); // start again after 8 seconds 
} 

StartAnimation(); // start it off 

Answer 4

Vérifiez this page for a demo pour l'animation de fond avec jquery et this pour son tutoriel.

Sinan.

Answer 5

Serait-il possible de combiner vos quatre images en un sprite (1 graphique réel avec les quatre images incluses & sans chevauchement)? Du point de vue de la performance, le navigateur du client n'a qu'à télécharger une seule image au lieu de faire 4 demandes pour chacune de vos quatre images.Créer l'animation serait aussi simple que d'utiliser la technique proposée ci-dessus par Damovisa, en utilisant un élément de bloc, en définissant cette image unique comme arrière-plan et en définissant la taille de l'élément à la taille d'un "pavé" de l'image unique, et en changeant la propriété css de l'arrière-plan. Je ne suis pas tout à fait sûr de cela (corrigez-moi si je me trompe), mais il semble que ce soit une opération moins coûteuse pour déplacer une image de fond plutôt que d'échanger quatre images différentes.

En ce qui concerne la portabilité et la réutilisabilité, vous pouvez simplement créer un plugin jQuery pour pouvoir l'utiliser à plusieurs endroits.

Answer 6

Cela est beaucoup plus facile et maintient chaîne capacité:

JQuery:

$(document).ready(function(){ 
    //rotator - delay, children 
    $('#slideshow').rotator(50, 'img'); 
}); 

Markup:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script> 
<script type="text/javascript" src="scripts/jquery.rotator.js"></script> 

<style type="text/css"> 
#slideshow { 
    position:absolute; //or whatever you need 
    display:block; 
    top:0px; 
    left:0px; 
} 
#slideshow img { 
    position:absolute; 
    opacity:0; 
} 
</style> 

<!-- SLIDESHOW --> 
<div id="slideshow"> 
    <img src="images/1.png"> 
    <img src="images/2.png"> 
    <img src="images/3.png"> 
</div> 

Plugin:

(function($){ 
    $.fn.rotator = function(delay, child){ 
     //set curImage val 
     var currImg = 0; 
     var currIt = true; 
     //set array of images 
     var ss = $('#slideshow').children(child); 
     var ssize = ss.size(); 
     setInterval(function() { 
      if(currIt){ 
       $(ss[currImg]).css('opacity','1'); 
       currIt = !currIt; 
      }else if (!currIt){ 
       $(ss[currImg]).css('opacity','0'); 
       $(ss[currImg+1]).css('opacity','1'); 
       currIt = !currIt; 
       currImg++; 
      } 
      //reset 
      if(currImg >= ssize){ 
       currImg = 0; 
       $(ss[currImg]).css('opacity','1'); 
      } 
     }, delay); 
     return this; 
    }; 
})(jQuery);