[v1.7.1] animate et backgroundPositionX [Résolu]

SpaceFrog · 01/12/2011, 15h04

Pour quelle raison étrange ceci ne fonctionne-t-il pas ???

Code :

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

1
2
3
4
5
6
  $(function(){
 
        $('#menu li').mouseenter(function(){
            $(this).stop(true,true).animate({"backgroundPositionX":"bottom"})
                                })
          })

Bovino · 01/12/2011, 15h24

animate() ne peut agir que sur des valeurs numériques

SpaceFrog · 01/12/2011, 16h02

bon alors en indiquant des positon en pixels des fois ça marche des fois pas

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
  $(function(){
        $('#menu li, .submnu1 li').not('.activemenu').css({"background-position":"0 0"});
        $('activemenu').css({"background-position":"0 -100"});
        $('#menu li, .submnu1 li').mouseenter(function(){$(this).animate({"background-position":"0 -100"});
                                            $(this).find('.submnu1').stop(true,false).slideToggle();
                   }).mouseleave(function(){$(this).animate({"background-position":"0"});
                                            $(this).find('.submnu1').stop(false,true).slideToggle();
                   })
 
 
 
          })

mais dans tous les cas je n'ai pas d'animation, juste un switch et si j'indique un duration il me fait comme un SetTimeout

SpaceFrog · 01/12/2011, 17h09

Je désepère ...

Code :

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

1
2
3
4
5
6
   $('#menu li, .submnu1 li').not('.activemenu').css({ 'background-position-x': 'center','background-position-y': "-=100"});
        $('activemenu').css({ 'background-position-x': 'center','background-position-y': -100});
        $('#menu li, .submnu1 li').mouseenter(function(){$(this).animate({ 'background-position-x': 0,
                                                                           'background-position-y': -100},
                                                                           1000,
                                                                           'linear');

Ne donne rien de mieux ...

Bovino · 01/12/2011, 17h30

Tu es sûr de background-position-x et background-position-y ?
Sinon, sur background-position, pose probablement pas car animate() ne fonctionne pas avec les propriétés raccourcies.
Ceci dit, je ne vois pas trop comment résoudre ton problème...

le_chomeur · 01/12/2011, 17h49

tu aurais le code source avec le menu ?

sinon essaye avec :

Code :

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

1
2
3
... .stop().animate(
			{backgroundPosition:"(0 -100px)"}, 
			{duration:500})

danielhagnoul · 01/12/2011, 21h58

Bonsoir

Pour animer un élément du DOM celui-ci doit avoir une position ("relative" suffit) et une dimension.

SpaceFrog · 02/12/2011, 08h39

backgroundPositionY ou background-position-Y ou backgroundPosition ou background-position, en relative ou non rien n'y fait. Des fois il switche, des fois pas, mais jamais avec une animation progressive avec ou sans duration ...

le_chomeur · 02/12/2011, 10h28

Yop spaffy , as tu le code complet ?

SpaceFrog · 02/12/2011, 10h40

C'est une maquette en developpement (d'ou le css dedans)

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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>
<head>
    <link type="text/css" rel="stylesheet" href="mystyles/unifier.css"/>
    <script type="application/x-javascript" src="mylibs/jquery-v1.7.1.min.js"></script>
    <script type="application/x-javascript">
 
    $(function(){
        $('#menu li, .submnu1 li').not('.activemenu').css({ 'background-position-x': 'center','background-position-y': "-=100"});
        $('activemenu').css({ 'background-position-x': 'center','background-position-y': -100});
        $('#menu li, .submnu1 li').mouseenter(function(){$(this).animate({ 'background-position-x': 0,
                                                                           'background-position-y': -100},
                                                                           {duration:1000},
                                                                           'linear');
 
                                            $(this).find('.submnu1').stop(true,false).slideToggle();
                   }).mouseleave(function(){
                                            $(this).find('.submnu1').stop(false,true).slideToggle();
                   })
 
 
 
          })
 
 
 
 
 
 
 
    </script>
 
 
    <title>SUFIX</title>
    <style type="text/css">
    html, body{
        width:100%;
        height:100%;
        margin:0;
        padding:0;
    }
 
    body {
        background-image:url('sitepics/tf.png');
        height:100%;
    }
    #header {width:100%;
        height: 100px;
        background-color:#1E539E;
        border:0;
    }
    #lheader {
        width:45%;
        height: 100%;
        background-color:#818C92;
        border:0;
        position:relative;
 
    }
    #hlogo {
        margin:10px;
        border:0;
        float:left;
        display:inline-block;
        position:absolute;
 
    }
    #adr {
        position:absolute;
        margin:10px 0 0 0 ;
        left: 250px;
        border:0;
        width:100px;
        color:#ffffff;
        font-family: verdana, arial;
        font-size: 11px;
        line-height:17px;
    }
    #page {
        width:1024px;
        border:0 ;
        margin:0 auto;
        background-image:url('sitepics/Bg.png');
        background-position: 0 0;
        background-color:#8E989D;
        background-repeat:no-repeat;
        position: relative;
        top:15px;
        height:100%;
        *min-height:100%;
 
 
    }
    #menu {
            margin:0 auto;
            width:1024px;
            position:relative;
            top:-20px;
    }
    #menu li {
        list-style-type:none;
        padding:0;
        text-align:center;
        float:left;
        width: 20%;
        line-height: 35px;
        font-family:verdana, arial;
        font-size:13px;
        font-weight:bold;
        color:#ffffff;
        background-image:url("sitepics/mnubtbg.png");
        background-position: 0 0;
        cursor:pointer;
 
    }
 
    .mnuactif {
        background-position:0 -100px!important;
    }
 
    .submnu1 {
        position:absolute;
        border:solid 1px silver;
        display:none;
        width: 600px;
        z-index:2;
        } 
 
    .submnu1 li {
        position:relative;
        list-style-type:none;
        border: 0;
        padding: 0;
        margin: 0;
        text-align:center;
        float:left;
        width: 200px !important;
        line-height: 35px;
        font-family:verdana, arial;
        font-size:13px;
        font-weight:bold;
        color:#ffffff;
        background-image:url("sitepics/mnubtbg.png");
        background-position: 0 0;
        cursor:pointer;
    }
 
    .titre {
        position: relative;
        top: 60px;
        border: 0;
        padding: 0;
        margin:  0;
        width: 100%;
        font-family:verdana, arial;
        font-size: 13px;
        font-weight: bold;
        color:#ffffff;
        background-color: #1E539E;
        }
 
    .cartouche {
        position: relative;
        top: 95px;
        margin: 10px;
        font-family:verdana, arial;
        font-size: 14px;
        border: solid 1px #1E539E;
        background-image:url('sitepics/bgsemitrsp.png');
 
        zoom:1;
    }
 
    .cartouche p {
        position: relative;
        margin: 20px;
        text-align: justify;
    }
    #siege{
        float:left;
        margin: 20px ;
 
    }
    </style>
</head>
<body>
<div id="header">
    <div id="lheader">
        <img id="hlogo" src="sitepics/glogos.jpg" alt="SUFIX"/><div id="adr">SUFIX<br/>Z.I. de la rangle<br/>27460 Alizay<br/><br/></div>
    </div>
    <ul id="menu">
        <li class="mnuactif">Accueil</li>
        <li >Nos produits
            <ul class="submnu1">
                <li>Supportage</li>
                <li>Fixations</li>
                <li>Visserie / Outillage</li>
            </ul>
        </li>
        <li>Ouest Isol</li>
        <li>Ouest Ventil</li>
        <li>Contact</li>
     </ul>
</div>
<div id="page">
 
    <div id="ecran">
        <div class="titre">
            SUFIX FIXATIONS et SUPPORTAGE
        </div>
        <div class="cartouche">
            <img id="siege" src="sitepics/SIEGE.jpg" alt="Sufix" />
           <p>
            Nullam in suscipit erat.<br/><br/> Maecenas purus purus, molestie sit amet condimentum sed, congue et ipsum. Sed ornare ligula nec elit bibendum pulvinar. In non ligula quam, nec ultrices mauris. Quisque vel tristique sem! In lacinia risus non justo ullamcorper vel egestas arcu facilisis. Suspendisse potenti. Nam sodales nulla sit amet turpis pretium placerat. Suspendisse potenti. Duis vulputate pellentesque erat, vitae venenatis libero dapibus non. Nunc ac eros magna, non commodo ante. Cras quam felis, vestibulum ac convallis nec; accumsan mollis ligula. Morbi sed augue non arcu rutrum venenatis.
          </p>
          <p>
            Nullam luctus augue et massa iaculis at imperdiet nisl tincidunt. Praesent odio felis, venenatis id tempus at, sollicitudin sed erat. Duis aliquam euismod arcu, eget laoreet felis gravida et. Sed auctor ligula ac urna ornare faucibus vestibulum enim aliquam. Etiam et mauris vel nibh varius ultricies in ut eros. Proin quis tortor ac nisl sollicitudin aliquam. Maecenas erat nulla, accumsan eget egestas luctus, iaculis vitae leo? Proin a nisi commodo mauris rhoncus condimentum eget eu lorem?
          </p>
          <p>
            Suspendisse potenti. Maecenas hendrerit dictum malesuada. Donec convallis porttitor eros, pharetra tempus eros tincidunt vel. Etiam consequat, enim eu volutpat dignissim, augue tortor egestas lorem, lacinia luctus nisi nunc ut sem. Aliquam et justo nulla. Curabitur id turpis vitae lacus mattis rhoncus quis sit amet tellus. Donec ac nunc a elit mollis fringilla eu pharetra elit. Nam ornare fringilla accumsan! Integer sagittis laoreet velit; eget dapibus libero varius vitae. In hac habitasse platea dictumst. Morbi ut lacus elementum mauris tristique tempus.
          </p>
        </div>  
 
    </div>
 
 
</div>
 
 
</body>
</html>

le_chomeur · 02/12/2011, 11h15

alors le background s'anime correctement avec ça :

Code :

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

1
2
3
$(this).animate(
			{backgroundPosition:"100"}, 
			{duration:500});

mais je ne sais pas pourquoi, si je met une seconde valeur , il ne se passe rien

SpaceFrog · 02/12/2011, 11h58

heu oui ...
mais je souhaite une translation verticale

SpaceFrog · 02/12/2011, 12h59

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
     $('#menu li, .submnu1 li').mouseenter(function(){
                                            $(this).animate( {'backgroundPosition':"0 -100"},
                                                             {'duration':500});
                                           $(this).find('.submnu1').stop(true,false).slideToggle();
 
                   }).mouseleave(function(){
                                             $(this).animate( {'backgroundPosition':"0 0"},
                                                             {'duration':500});
                                            $(this).find('.submnu1').stop(false,true).slideToggle();
                   })
 
 
 
          })

Le switch se fait mais sans animation comme un setTimout ...

http://www.onenaught.com/posts/171/j...on-as-a-plugin
A noter que cela ne fonctionne pas si l'on précise l'unité px

SpaceFrog · 02/12/2011, 15h01

Bon ben j'ai trouvé un complément de lib qui fait le taff
http://keith-wood.name/backgroundPos.html

et je peux même me permettre de melanger du center avec du numérique

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
 $(function(){
        $('#menu li, .submnu1 li').not('.activemenu').css({ 'backgroundPosition': 'center 0'});
        $('.activemenu').css({ 'backgroundPosition': 'center -100'});
 
        $('#menu li, .submnu1 li').mouseenter(function(){
                                           $(this).stop().animate( {'backgroundPosition':"center -100"},
                                                             {'duration':500});
                                           $(this).find('.submnu1').stop(true,false).slideToggle();
 
                   }).mouseleave(function(){
                                             $(this).stop().animate( {'backgroundPosition':"center 0"},
                                                             {'duration':200});
                                            $(this).find('.submnu1').stop(false,true).slideToggle();
                   })
 
 
 
          })

SpaceFrog · 02/12/2011, 15h07

Arf, c'était trop beau pour être vrai !!!

Sous IE le background il fait un tour complet

NoSmoking · 02/12/2011, 19h30

Bonjour à tous
j'étais tombé sur ceci il y a jadis http://snook.ca/archives/javascript/...age-animations

SpaceFrog · 03/12/2011, 09h52

Oui merci NS je suis bien entendu déja passé par là ... et bien d'autres
Mais son code ne résoud pas mon souci

danielhagnoul · 03/12/2011, 23h50

Bonsoir

Je crois que l'exemple ci-dessous fonctionne comme tu le souhaite. Par rapport à ton code, j'ai juste enlevé le CSS .menuactif car rendre le premier menu actif par défaut au début c'est facile, mais après divers cheminement entre sous-menus et menu cela devient difficile. Bien entendu j'ai fait attention à l'écriture, pas -100, mais "-100px" et par précaution pas 0, mais "0px".

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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!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; }
		.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; }
 
		/* Test */
		#header {width:100%;
			height: 100px;
			background-color:#1E539E;
			border:0;
		}
		#lheader {
			width:45%;
			height: 100%;
			background-color:#818C92;
			border:0;
			position:relative;
		}
		#hlogo {
			margin:10px;
			border:0;
			float:left;
			display:inline-block;
			position:absolute;
 
		}
		#menu {
			margin:0 auto;
			width:1024px;
			position:relative;
			top:-20px;
		}
		#menu li {
			list-style-type:none;
			padding:0;
			text-align:center;
			float:left;
			width: 20%;
			line-height: 35px;
			font-family:verdana, arial;
			font-size:13px;
			font-weight:bold;
			color:#ffffff;
			background-image:url("http://danielhagnoul.developpez.com//images/imageTest.png"); /* sitepics/mnubtbg.png"); */
			background-position: 0 0;
			cursor:pointer;
		}
		.submnu1 {
			position:absolute;
			border:solid 1px silver;
			display:none;
			width: 600px;
			z-index:2;
		} 
		.submnu1 li {
			position:relative;
			list-style-type:none;
			border: 0;
			padding: 0;
			margin: 0;
			text-align:center;
			float:left;
			width: 200px !important;
			line-height: 35px;
			font-family:verdana, arial;
			font-size:13px;
			font-weight:bold;
			color:#ffffff;
			background-image:url("http://danielhagnoul.developpez.com//images/imageTest.png"); /* sitepics/mnubtbg.png"); */
			background-position: 0 0;
			cursor:pointer;
		}
	</style>
</head>
<body>	
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
		<div id="header">
			<div id="lheader">
				<img id="hlogo" src="http://danielhagnoul.developpez.com/images/avatarDVJH.jpg" alt="SUFIX"/><div id="adr">SUFIX<br/>Z.I. de la rangle<br/>27460 Alizay<br/><br/></div>
			</div>
			<ul id="menu">
				<li>Accueil</li>
				<li>
					Nos produits
					<ul class="submnu1">
						<li>Supportage</li>
						<li>Fixations</li>
						<li>Visserie / Outillage</li>
					</ul>
				</li>
				<li>Ouest Isol</li>
				<li>Ouest Ventil</li>
				<li>Contact</li>
			</ul>
		</div>
 
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2011-12-03T23:49:41.000+01:00" pubdate>2011-12-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.1.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/jPicker/jpicker-1.1.6.min.js"></script>
	<!--
	<script charset="utf-8" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
	<script charset="utf-8" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/additional-methods.min.js"></script>
	<script charset="utf-8" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_fr.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;
		};
 
		$(function(){
			/* Base */
			console.log(new Date().formatISO());
 
			/* jPicker : http://www.digitalmagicpro.com/jPicker/, outil pour choisir rapidement une couleur */
			$.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("backgroundColor", "rgba(" +
			c.r + "," + c.g + "," + c.b + "," + (c.a/255).toFixed(2) + ")");}});
		});
 
		$(function(){
			/* Test */
 
			$('#menu li, .submnu1 li')
				.mouseenter(function(){
					$(this).animate({
						'background-position-x': "0px",
						'background-position-y': "-100px"
					}, {duration:1000}, 'linear');
 
					$(this).find('.submnu1').stop(true,false).slideToggle();
 
				}).mouseleave(function(){
					$(this).animate({
						'background-position-x': "0px",
						'background-position-y': "0px"
					}, {duration:1000}, 'linear');
 
					$(this).find('.submnu1').stop(false,true).slideToggle();
				});
		});
	</script>
</body>  
</html>

SpaceFrog · 05/12/2011, 08h44

Pas mieux, je dois avoir un souci de version de navigateur ???
Mais même sous IE j'ai le même resultat

SpaceFrog · 05/12/2011, 10h55

Bon j'ai laissé tomber le animate sur le background qui est vraiment versatile avec jquery !!!!!!!!!!

Voici comment j'ai contourné le souci
http://www.ouestisol.fr/JUSTALITTLEF...lkh=mkjhfljfds

Mais il me reste un autre problème, celui de ne selectionner que les images du node survolé et pas les images de ses enfants
Actuellement au survol du bouton nos produits, toutes les images enfant en arrière plan heritent de l'animation

01/12/2011, 15h24	#2
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 808 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 808 Points : 35 789 Points : 35 789	animate() ne peut agir que sur des valeurs numériques __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

01/12/2011, 17h30	#5
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 808 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 808 Points : 35 789 Points : 35 789	Tu es sûr de background-position-x et background-position-y ? Sinon, sur background-position, pose probablement pas car animate() ne fonctionne pas avec les propriétés raccourcies. Ceci dit, je ne vois pas trop comment résoudre ton problème... __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

01/12/2011, 21h58	#7
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	Bonsoir Pour animer un élément du DOM celui-ci doit avoir une position ("relative" suffit) et une dimension. __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

02/12/2011, 10h28	#9
le_chomeur Expert Confirmé Sénior Développeur informatique Inscription : février 2006 Messages : 3 563 Détails du profil Informations personnelles : Localisation : France Informations professionnelles : Activité : Développeur informatique Informations forums : Inscription : février 2006 Messages : 3 563 Points : 4 025 Points : 4 025	Yop spaffy , as tu le code complet ? __________________ est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes Premier ministre du CCMPTP* (Comité Contre le Mot "Problème" dans les Titres de Posts )*
	00

02/12/2011, 11h58	#12
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 071 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 071 Points : 45 202 Points : 45 202	heu oui ... mais je souhaite une translation verticale __________________ 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

02/12/2011, 08h39	#8
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 071 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 071 Points : 45 202 Points : 45 202	backgroundPositionY ou background-position-Y ou backgroundPosition ou background-position, en relative ou non rien n'y fait. Des fois il switche, des fois pas, mais jamais avec une animation progressive avec ou sans duration ... __________________ 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

02/12/2011, 15h07	#15
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 071 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 071 Points : 45 202 Points : 45 202	Arf, c'était trop beau pour être vrai !!! Sous IE le background il fait un tour complet __________________ 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

02/12/2011, 19h30	#16
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 776 Points : 4 776	Bonjour à tous j'étais tombé sur ceci il y a jadis http://snook.ca/archives/javascript/...age-animations
	00

03/12/2011, 09h52	#17
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 071 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 071 Points : 45 202 Points : 45 202	Oui merci NS je suis bien entendu déja passé par là ... et bien d'autres Mais son code ne résoud pas mon souci __________________ 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

05/12/2011, 08h44	#19
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 071 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 071 Points : 45 202 Points : 45 202	Pas mieux, je dois avoir un souci de version de navigateur ??? Mais même sous IE j'ai le même resultat __________________ 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

05/12/2011, 10h55	#20
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 071 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 071 Points : 45 202 Points : 45 202	Bon j'ai laissé tomber le animate sur le background qui est vraiment versatile avec jquery !!!!!!!!!! Voici comment j'ai contourné le souci http://www.ouestisol.fr/JUSTALITTLEF...lkh=mkjhfljfds Mais il me reste un autre problème, celui de ne selectionner que les images du node survolé et pas les images de ses enfants Actuellement au survol du bouton nos produits, toutes les images enfant en arrière plan heritent de l'animation __________________ 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

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