fonction personnelle chainable

Version imprimable

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:

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>

24/01/2012, 07h29
hariman
Bonjour,

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

1 2 3 4 ... $().test4(); $().test5(); ...
24/01/2012, 08h55
SpaceFrog

http://javascript.developpez.com/faq...Plugins#Plugin
24/01/2012, 15h34
zapmtl

Cela fonctionne !!! :-)

Merci

Cela fonctionne pour 2 fonctions !! mais pas 3 fonctions enchainées

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:

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

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:

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>

03/02/2012, 15h27
zapmtl

chainage de fonction...
Bonjour Hariman,

Ta solution fonctionne mais ne convient pas.

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

1 2 3 $().test4(); $().test5(); $().test6();
ou
Code:

1 2 3 $().test6(); $().test4(); $().test5();
ou
Code:

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

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:

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>