Effet slide gauche-droite
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:
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:
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:
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
