[v1.7.1] animate et backgroundPositionX

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

[v1.7.1] animate et backgroundPositionX

jQuery

Discussions similaires

Partager

Partager