fonction personnelle chainable [Résolu]

zapmtl · 24/01/2012, 03h19

Bonjour,

Je cherche à écrire des fonctions chainable.

Je voudrais qu'une fonction personnelle s’exécute après une autre.

Pour le moment les 2 fonctions s’exécutent en même temps, et non l'une après l'autre.

Merci

ZapMtl

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script language="JavaScript" type="text/JavaScript">
(function($)
{
    $.fn.test4=function()
    {
      $('#animateTest1').animate({ left: '+=200' }, 2000);
      return $(this);
    };
	$.fn.test5=function()
    {
      $('#animateTest2').animate({ left: '+=200' }, 2000);
      return $(this);
    };
})(jQuery);
 
$(document).ready(function(){
  $().test4().test5();
});  
</script>
 
</head>
 
<body>
  <div id="animateTest1" style="top:10px;left:10px;width:50px;height:50px;background-color:Aqua;position:absolute;"></div>
  <div id="animateTest2" style="width:50px;height:50px;background-color:red;position:absolute;top:100px;"></div>
</body>
</html>

hariman · 24/01/2012, 07h29

Bonjour,

Qu'est-ce que ça donne si tu fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
...
$().test4();
$().test5();
...

SpaceFrog · 24/01/2012, 08h55

http://javascript.developpez.com/faq...Plugins#Plugin

zapmtl · 24/01/2012, 15h34

Cela fonctionne !!! :-)

Merci

zapmtl · 03/02/2012, 02h34

Bonjour,

Donc la fonction test4 s'exécute bien, puis la test5 et test6 en même temps.

Est ce qu'il y a un moyen d"imbriquer des fonctions les une après les autres.

La solution avec la fonction complete pourrait fonctionner dans mon exemple. Mais quand on veut enchainer plusieurs fonction que l'on crée..

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script language="JavaScript" type="text/JavaScript">
(function($)
{
    $.fn.test4=function()
    {
      $('#animateTest1').animate({ left: '+=200' }, 2000);
      return $(this);
    };
	$.fn.test5=function()
    {
	   $('#animateTest2').delay(2000).animate({ top: '+=200' }, 2000);
      return $(this);
    };
 
	 $.fn.test6=function()
    {
      $('#animateTest1').animate({ left: '-=200' }, 2000);
      return $(this);
    };
 
 
})(jQuery);
 
$(document).ready(function(){
 
 
});  
function TextGo()
{
   $().test4();
   $().test5();
   $().test6();
}
</script>
 
</head>
 
<body>
<a href="javascript:TextGo();">Go Test</a> 
<div id="animateTest1" style="top:30px;left:10px;width:50px;height:50px;background-color:Aqua;position:absolute;"></div>
  <div id="animateTest2" style="width:50px;height:50px;background-color:red;position:absolute;top:100px;"></div>
</body>
</html>

Merci si quelqu'un a eu ce problème.

ZapMtl

hariman · 03/02/2012, 11h17

Bonjour,

Je me suis trompé sur la 1ère solution.
Je viens de remarquer que les 3 fonctions s'exécutent encore en même temps, L'appel de delay(2000) dans test5() nous fait croire que test4() et test5() ne se lancent pas en même temps.

J'ai essayé ce code et ça marche :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<script language="JavaScript" type="text/JavaScript">
(function($)
{
    $.fn.test4=function()
    {
      $('#animateTest1').animate({ left: '+=200' }, 2000, $.fn.test5);
      return $(this);
    };
	$.fn.test5=function()
    {
	   $('#animateTest2').animate({ top: '+=200' }, 2000, $.fn.test6);
      return $(this);
    };
 
	 $.fn.test6=function()
    {
      $('#animateTest1').animate({ left: '-=200' }, 2000);
      return $(this);
    };
 
 
})(jQuery);
 
$(document).ready(function(){
 
 
});  
function TextGo()
{
   $().test4();
}
</script>

zapmtl · 03/02/2012, 15h27

Bonjour Hariman,

Ta solution fonctionne mais ne convient pas.

Car les fonctions ne s’appellent pas forcement dans cet ordre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 $().test4();
   $().test5();
   $().test6();

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 $().test6();
   $().test4();
   $().test5();

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
 $().test5();
   $().test4();
   $().test6();

Je teste sur un exemple simple mais par la suite chaque fonction est plus complexe avec plusieurs animation dedans.

Merci

ZapMtl

danielhagnoul · 03/02/2012, 22h55

Bonsoir

Je parle par rapport au premier message de la discussion.

Votre chaînage des instructions se passe tout à fait correctement, il n'est pas en cause.

Si vous demandez deux animations sur le même élément ou sur deux éléments différents, elles se dérouleront en même temps. Le traitement des animations est prévu comme cela par défaut. Pour régler le problème, la solution le plus simple est d'utiliser une fonction de rappel pour que l'animation suivante attende la fin de la première. Le fait que vous traitez des plugins ne change rien à l'affaire.

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Redressed&subset=latin&v2'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/jPicker/css/jPicker.dvjh-1.1.6.min.css" />	
	<style>
		/* Base */
		html { font-size:62.5%; } /* Pour 62.5% 1rem =~ 10px */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0; padding:0; }
		body { background-color:rgb(122, 79, 79); color:#000000; font-family:sans-serif; font-size:1.4rem; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:'Redressed', cursive; padding:0.6rem; }
		p, div, td { word-wrap:break-word; }
		pre, code { white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select { max-width:100%; }
        img { border:none; }
		h1 { font-size:2.4rem; text-shadow: 0.4rem 0.4rem 0.4rem #bbbbbb; text-align:center; }
		p { padding:0.6rem; }
		ul { margin-left:2.4rem; }
		.conteneur { width:95%; min-width:80rem; min-height:30rem; margin:1.2rem auto; background-color:#ffffff; color:#000000; border:0.1rem solid #666666; }
		footer { margin-left:3.6rem; }
 
		/* --- */
		#animateTest1, #animateTest2 {
			position : relative;
			width : 20rem;
			height : 20rem;
			margin : 1.2rem;
			padding : 0.6rem;
			border : 0.1rem dotted grey;
		}
</style>
</head>
<body>	
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
<div id="animateTest1"></div>
<div id="animateTest2"></div>
 
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2012-02-03T22:37:10.000+01:00" pubdate>2012-02-03</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.7.2b1.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/jPicker/jpicker-1.1.6.min.js"></script>
	<script>
		"use strict";
 
		// Date ISO format long US
		Date.prototype.formatISO = function(){
			this._nowFormat = 'aaaa-mm-jjThh:ii:ss.000Szz:00';
			this._toLen2 = function(_nowStr){
				_nowStr = _nowStr.toString();
				return ('0'+_nowStr).substr(-2,2);
			};
			this._nowFormat = this._nowFormat.replace(/j+/, this._toLen2(this.getDate()));
			this._nowFormat = this._nowFormat.replace(/m+/, this._toLen2(this.getMonth()+1));
			this._nowFormat = this._nowFormat.replace(/a+/, this.getFullYear());
			this._nowFormat = this._nowFormat.replace(/h+/, this._toLen2(this.getHours()));
			this._nowFormat = this._nowFormat.replace(/i+/, this._toLen2(this.getMinutes()));
			this._nowFormat = this._nowFormat.replace(/s+/, this._toLen2(this.getSeconds()));
			this._nowFormat = this._nowFormat.replace(/S+/, (this.getTimezoneOffset() < 0) ? ("+") : ("-"));
			this._nowFormat = this._nowFormat.replace(/z+/, this._toLen2(Math.abs(this.getTimezoneOffset()/60)));
			return this._nowFormat;
		};
 
		// Année bissextile ? le jour 0 du mois de mars !
		// console.log( new Date( 2012, 2, 0 ).getDate() );
 
		$(function(){
			/* Base */
			console.log(new Date().formatISO());
 
			/* Test */
 
$.fn.test4 = function( callback ){
	var funcRappel = callback || $.noop();
 
	$('#animateTest1').animate({ left: '+=200' }, 2000, funcRappel );
 
	return this;
};
 
$.fn.test5 = function( callback ){
	var funcRappel = callback || $.noop();
 
	$('#animateTest2').animate({ left: '+=200' }, 2000, funcRappel );
 
	return this;
};
 
 $( "body" ).test4( function(){
	$( "section.conteneur").test5( function(){
		$( this ).css( "background-color", "rgba( 255, 170, 86, 0.69)" );
	}).append( "<p>Un mot pour remplir</p>" );
});
 
			/*
			 * jPicker : http://www.digitalmagicpro.com/jPicker/,
			 * est un outil pour choisir rapidement une couleur
			 *
			 * Sue Firefox, avec Web Developper, cette version
			 * de jPicker provoque des avertissements CSS !
			 *
			 * Mais il est très pratique !
			 */
			$.fn.jPicker.defaults.images.clientPath="http://danielhagnoul.developpez.com/lib/jPicker/images/";
 
			$(".conteneur").jPicker({
				window: {
					expandable : true,
					title : "jPicker : choissisez une couleur :",
					alphaSupport : true,
					position : {
						x : 'screenCenter',
						y : 'top'
					}
				},
				color : {
					active : new $.jPicker.Color({
						r : 210,
						g : 214,
						b : 98,
						a : 128
					})
				}
			}, function( color, context ){
				var c = color.val("all");
				if ( c ){
					$( "body" ).css( "background-color", "rgba(" + c.r + "," + c.g + "," + c.b + "," + (c.a/255).toFixed(2) + ")" );
				}
			});
		});
 
		$(window).load(function(){			
		});
	</script>
</body>  
</html>

24/01/2012, 08h55	#3
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 079 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 079 Points : 45 213 Points : 45 213	http://javascript.developpez.com/faq...Plugins#Plugin __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

24/01/2012, 15h34	#4
zapmtl Invité de passage Grégoire Webmaster Inscription : janvier 2012 Messages : 5 Détails du profil Informations personnelles : Nom : Grégoire Localisation : Canada Informations professionnelles : Activité : Webmaster Secteur : Communication - Médias Informations forums : Inscription : janvier 2012 Messages : 5 Points : 3 Points : 3	Cela fonctionne !!! :-) Merci
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email