Discussion :

[Soundboy39]

Bonjour à toutes et tous !!

J'ai un soucis avec cette fonction : http://docs.jquery.com/UI/Effects/Slide

L'effet est bien appliqué mais le souci c'est que l’élément affiché ne s'affiche pas correctement lors de la transition, voici le site en question, vous pourrez constater la chose lors du survol des onglets "en fixed" sur le côté : http://www.mo-web-creation.com/showroom/jm/

L'image "peinture" et "photo" ne sont pas dans les bonnes dimensions lors des transitions, et je n'arrive pas à voir pourquoi ...

Voici le code de la section onglet :

HTML

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
<section class="section" id="side-tabs">
		<div>
			<a class="left" href="peintures.php" title="Acceder à la Galerie Peinture de Jacques Maillard">
				<img src="design/peinture-tab.jpg" />
			</a>
			<img class="left" alt="Galerie Peintures" src="design/peintures-tab-text.png" />
			<span class="clear"></span>
		</div>
		<hr />
		<div>
			<a class="left" href="photos.php" title="Acceder à la Galerie Photos de Jacques Maillard">
				<img src="design/photo-tab.jpg" />
			</a>
			<img class="left" alt="Galerie PHOTOS" src="design/photos-tab-text.png" />
			<span class="clear"></span>
		</div>
	</section>

JS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
$('#side-tabs div a').on( 
{ 	mouseover: function() {
	var parentdiv = $(this).parent('div');
	var tabtext = parentdiv.children('img');	
	$(tabtext).show('slide', { direction: 'left' }, 200);
	},
	mouseout: function() {
	var parentdiv = $(this).parent('div');
	var tabtext = parentdiv.children('img');
	$(tabtext).hide('slide', { direction: 'left' }, 200);
	}
}
);

et le CSS

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
#side-tabs
{
	display: block;
    left: 0;
    position: fixed;
    top: 15%;
    width: 14%;
}
#side-tabs div
{
	display: block;
	width: 100%;
}
#side-tabs a
{
	width: 40%;
	display: block;
}
#side-tabs a img
{
	width: 100%;
	display: block;
}
#side-tabs img
{
	width: 40%;
	display: none;
}
#side-tabs hr
{
	height: 2em;
	clear: both;
}

Je vous remercie d'avance pour le coup de main et je souhaite une Bonne soirée à tous !!

MICKAEL

[danielhagnoul]

Bonsoir

jQuery et jQuery UI ne sont pas en cause.

J'ai testé votre page en suivant le lien. C'est un problème uniquement CSS dû au fait que l'on impose une largeur de 40 % à l'image cachée, donc elle se redimensionne automatiquement à sa taille normale à la fin de l'animation.

[Soundboy39]

Bien vu ! En effet le script générant l’animation créer une div au moment de la transition, du coup la taille de l'image se retrouvais réduite plutôt que d'être à 100%.

Donc petite modif' au niveau du css après avoir identifié la class de la div généré et c'est repartis !!

merci pour le coup de main !!