utiliser plusieurs fois la même animation jquery

Version imprimable

06/07/2011, 16h18
artenis

utiliser plusieurs fois la même animation jquery

Bonjour, j'ai créé a partir de plusieurs images (flèche) une animation qui fait disparaître puis réapparaître les flèches les unes après les autres (continuellement) (en jquery).

Sauf erreur dans l'utilisation de cette animation, est-il possible d'utiliser plusieurs fois cette animation à des endroits différents sur une page d'un site?

la partie jquery de l'animation se trouve dans le fichier detail_lien.js
l'affichage de l'animation se trouve sur une page fleche.php
et celle-ci est appelée en php avec un include dans la page principale du site (index.php).

actuellement avec cette configuration d'appel de page et d'animation, seul le premier appel de l'animation marche sur les deux afficher.

merci pour vos explications et réponses
06/07/2011, 17h10
SpaceFrog

elle est codée comment cette animation ?

si tu l'affectes au moyen d'un selecteur cela ne pose aucun souci

voici mes codes:
affichage de l'animation (avec images) fleche.php (images dans le fichier css):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<?php echo"
        <div class='fleche-lien'>
    <table cellpadding='0' cellspacing='0'  width='62px'>
    <tr>
    <td width='15px'>   <div id='fleche1'></div>        </td>
    <td width='15px'>    <div id='fleche2'></div>       </td>
    <td width='15px'>    <div id='fleche3'></div>       </td>
    <td width='15px'>    <div id='fleche4'></div>       </td>
    </tr>
    </table>
    </div>      
        ";
?>

codage de l'animation (jquery):detail_lien.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
function animfleche(){
	$('#fleche1').delay(200).fadeOut(200);
	$('#fleche2').delay(400).fadeOut(200);
	$('#fleche3').delay(600).fadeOut(200);
	$('#fleche4').delay(800).fadeOut(200);
 
	$('#fleche1').delay(1000).fadeIn(300);
	$('#fleche2').delay(1200).fadeIn(300);
	$('#fleche3').delay(1400).fadeIn(300);
	$('#fleche4').delay(1600).fadeIn(300);
	}
$(document).ready(function(){
	setInterval('animfleche();',3000);
});

enfin recuperation du fichier fleche.php dans la page principale (index.php):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="detail_liens.js"></script>
<div>
<div id="acces">
                <table>
                <tr>
                <td width="70%" style="font-size:11px; border:px solid black; color:#333" > Acceder aux tutoriels</td>
                <td width="30%"><?php include('fleche.php'); ?></td>
                </tr>
                </table>
            </div>
</div>
<div>
<div id="acces">
            <table>
                <tr>
                <td width="70%" style="font-size:11px; border:px solid black; color:#333" > Acceder aux technologies</td>
                <td width="30%"><?php include('fleche.php'); ?></td>
                </tr>
                </table>
            </div>
</div>

pourriez vous expliquez selecteur, car je n'est tjs pas assimiler les termes informatique ?

06/07/2011, 17h43
artenis

Une question en parralèle , j'aimerais savoir si c normal, par rapport au code jquery de l'animation , que celle-ci bug à un certain moment (soit: que les flèches ne disparaissent/apparaissent plus dans l'ordre mais dans le désordre)
environ 3à 5 min après le debut de l'animation
06/07/2011, 18h00
gwinyam

Trace sur une ligne de temps ce que tu demandes à ton script de faire et vérifie bien la doc de .delay() avant de le faire, enfin surtout la façon dont elle s'exécute. Tu comprendras très vite le pourquoi de ta dernière question.

Tu vas voir qu'en réalité, tu fais des appels à des fonctions qui sont demandés dans le temps mais qui ne bloquent pas l'exécution à un stade précis de ta fonction. Du coup tous tes appels sont empilés comme ça à la volée. La première fois, niquel mais après bah ça devient n'importe quoi. Comme tu as pu le constater.

Pour ta première question, oui c'est toujours réutilisable mais il faut que tu modifies quelque peu ton script pour le rendre "dynamique". Dans le sens où en paramètres, tu dois lui passer la liste des identifiants de tes flèches plutôt que de les écrire en dur dans ta fonction.
06/07/2011, 22h56
artenis

merci beaucoup pour ton explication gwinyam

j'ai modifié mon code jquery , je n'ai pas encore remarqué de probleme dans le temps, donc ça devrait être bon,

cependant, j'en demande peut être un peu trop, mais pourrais -je avoir un exemple de :
citation "Dans le sens où en paramètres, tu dois lui passer la liste des identifiants de tes flèches plutôt que de les écrire en dur dans ta fonction."

serait-ce par hazard de variable dont tu parles ??
ex: var fleche1 = f1;

merci encore

bon apparemment le probleme de l'animation n'est pas résolu :( , après 7 min,
cad plus de 140 répétitions , l'animation bug et les fleches s'affiche dans le désordre.

De plus le site api.jquery.com/delay ne m'explique pas plus que ce que j'ai déjà compris.
voici le code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function animfleche(){ $('#fleche1').fadeIn(200).delay(100).fadeOut(200); $('#fleche2').delay(200).fadeIn(200).delay(300).fadeOut(200); $('#fleche3').delay(400).fadeIn(200).delay(500).fadeOut(200); $('#fleche4').delay(600).fadeIn(200).delay(700).fadeOut(200); } $(document).ready(function(){ setInterval('animfleche();',2800); });

07/07/2011, 08h24
SpaceFrog

lance les enchainements dans les callbacks ...
07/07/2011, 08h50
gwinyam
Citation:

Envoyé par artenis

serait-ce par hazard de variable dont tu parles ??
ex: var fleche1 = f1;

Tout à fait, mais attention, surtout pas des variables globales. Je te parle de paramètres à ta fonction animFleche().

Suggestion d'appel :
Code:

1 2 3 4 5 6 animFleche({ fleche1 : '#fleche1', fleche2 : '#fleche2', fleche3 : '#fleche3', fleche4 : '#fleche4', });
Comme ça tu apprendras aussi à manipuler le JSON, même notation sur laquelle est basé une partie des API de jQuery.

Bonjour

Un ID doit être unique ! Je vois deux divisions d'ID "acces" dans le code HTMl du message 3 !

Code:

1
2
3
4
5
6
setInterval(function(){
	$("#fleche1").stop(true, true).delay(200).fadeIn(200).delay(200).fadeOut(200); // 800 + 200 = 1000
	$("#fleche2").stop(true, true).delay(1000).fadeIn(200).delay(200).fadeOut(200); // 1000 + 600 + 200 = 1800
	$("#fleche3").stop(true, true).delay(1800).fadeIn(200).delay(200).fadeOut(200); // 1800 + 600 + 200 = 2800
	$("#fleche4").stop(true, true).delay(2800).fadeIn(200).delay(200).fadeOut(200); // 2800 + 600 + 200 = 3600
}, 3600);

stop() : http://api.jquery.com/stop/

07/07/2011, 12h19
gwinyam

La meilleure solution à ce problème de temporisation reste pour moi ce qui est proposé par space_frog : les callbacks, comme ça chaque élément dépend du précédent.
07/07/2011, 20h34
artenis

j'ai compris le système du callback, cependant pour la partie :"Dans le sens où en paramètres, tu dois lui passer la liste des identifiants de tes flèches plutôt que de les écrire en dur dans ta fonction.", je n'ai malheureusement pas le temps d'appronfondir mes compétences car je suis limité dans le temps de la conception de mon site.

merci
07/07/2011, 23h21
danielhagnoul

Citation:

Envoyé par gwinyam

La meilleure solution à ce problème de temporisation reste pour moi ce qui est proposé par space_frog : les callbacks, comme ça chaque élément dépend du précédent.

Bonsoir

Les fonctions de rappel sont une solution, mais comme souvent en jQuery pas la seule.

J'ai bien entendu testé le code que je propose et plus de 5 minutes.

Avec ce code je voulais attirer l'attention sur le soin à mettre dans le choix et le calcul de la temporisation.
07/07/2011, 23h52
gwinyam

Ce dont je ne doute pas une minute commençant à connaître l'expert qui réside en toi.;)

artenis, tu peux sans problème faire confiance à la solution proposée par danielhagnoul. Certes j'insiste sur le callback qui pour moi est une façon de penser, de mon point de vue, plus claire, mais il n'empêche que sa méthode reste bonne, simple et claire.8-)