fonction personnelle chainable

**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>

**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>

fonction personnelle chainable

jQuery

Vue hybride

Discussions similaires

Partager

Partager