Sliding images et l'event mouseover
Bonjour j'ai un menu. avec des noms de produit
et je voudrais qu'au passage de la souris sur un nom de produit l'image de celui ci s'affiche avec l'effet slide de gauche à droite, et pareil pour tout les éléments du menu.
J'ai donc utilisé le package jquery UI et la fonction :
Code:
.effect('slide', 'slow')
Cependant j'ai du mal a faire disparaître la première image pour afficher la deuxième en slide également lorsque je passe sur le nom de produit d'a coté.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
// je cache les div image au chargement de la page
$('.divImage1').hide();
$('.divImage2').hide();
// j'initialise un evenement mouseover sur les onglets du menu
$('.menuOnglet1').bind('mouseover',function() {
// j'affiche en mode slide la div de l'image1
$( ".divImage1" ).effect( 'slide', 'slow' );
});
$('.menuOnglet2').bind('mouseover',function() {
// j'affiche en mode slide la div de l'image2
$( ".divImage2" ).effect( 'slide', 'slow' );
}); |
Comment puis je faire disparaître la première image proprement pour afficher la deuxième lors du mouseover sur le deuxième onglet ?
Merci
