[Résolu] JQuery : Slider d'actus maison

Bonjour la foule

Mon soucis est simple, pour un template WordPress j'ai créé un slider doté d'une div grand format (500x300), agrémenté de 3 div sur son côté droit (150x100).

Le principe : au survol d'une des 3 cases latérales, le contenu du grand format est modifié.

Le fonctionnement imaginé : je charge les thumbnail des 3 actus pour le grand format et je charge les titres des 3 cases latérales. Je cache 2 des grandes actus.
Au survol d'une des 3 div, l'image en relation avec la grande div apparait et je cache les 2 autres.

Ca c'est la théorie.
La réalité, ça ne fonctionne pas et voilà le code :

HTML

<div id="diapo-actus">
	<div class="large-image-0">
		<img src="http://placehold.it/500x300" />
		<div class="texte-image">
				<strong><a href=#">Titre 0</a></strong>
				Résumé de l'article 0
		</div>
	</div>
	<div class="large-image-1">
		<img src="http://placehold.it/500x300" />
		<div class="texte-image">
				<strong><a href=#">Titre 1</a></strong>
				Résumé de l'article 1
		</div>
	</div>
	<div class="large-image-2">
		<img src="http://placehold.it/500x300" />
		<div class="texte-image">
				<strong><a href=#">Titre 2</a></strong>
				Résumé de l'article 2
		</div>
	</div>
	<div id="liste-actus">
		<div class="actu-0">
			<a href="#">Titre 0</a>
		</div>
		<div class="actu-1">
			<a href="#">Titre 1</a>
		</div>
		<div class="actu-2">
			<a href="#">Titre 2</a>
		</div>
	</div>
</div>

JQuery

<script type="text/javascript">
$(document).ready(function() {
	$('.actu-0').hover(function(){
		$('.diapo-actu-1,.diapo-actu-2').fadeOut(100);
		$('.diapo-actu-0').fadeIn(500);
	});
	$('.actu-1').hover(function(){
		$('.diapo-actu-0,.diapo-actu-2').fadeOut(100);
		$('.diapo-actu-1').fadeIn(500);
	});
	$('.actu-2').hover(function(){
		$('.diapo-actu-0,.diapo-actu-1').fadeOut(100);
		$('.diapo-actu-2').fadeIn(500);
	});
});
</script>

Une idée de ou je m... de ou je fais pas bien ?
Modifié par Gilforge (30 Apr 2013 - 18:02)

Super, en écrivant le problème je me suis rendu compte que je ne ciblais pas les bonnes class.
En l'occurrence, c'était large-image-0, 1 et 2 qu'il fallait cibler et non diapo-actu-0, 1 et 2.

$('.actu-0').hover(function(){
		$('.large-image-1,.large-image-2').fadeOut(100);
		$('.large-image-0').fadeIn(500);
	});

Donc maintenant ça fonctionne (youhouuuu !), cependant, il y a un flash, et un décalage des 3 div latérales pendant le masquage des 2 grandes div.

Une piste pour résoudre ?
(avant que je trouve )

Bon ben j'ai trouvé...

C'est la méthode fadeIn cumulée au fadeOut qui fait tout sauter au survol.
En remplaçant ces 2 méthodes par de bêtes .hide / .show tout fonctionne sans problème.

$('.actu-0').hover(function(){
		$('.large-image-1,.large-image-2').hide();
		$('.large-image-0').show();
	});

C'est moins beau, mais c'est fonctionnel.

Ben du coup, résolu

Edit : En fait seul le FadeOut fait tout sauter.
Modifié par Gilforge (02 May 2013 - 09:21)

Je reviens sur cet "auto-topic" parce que je me suis aperçu que ça posait un problème sous IE7.

Impact : Décalage vers la droite de la div se superposant aux grandes div.

Ca vous parle ?
Modifié par Gilforge (02 May 2013 - 09:23)

Toujours en auto-conversation je me réponds à moi-même :

En fait la class de la div .texte-image était en absolute.
En la passant en relative ça résoud mon problème de décalage... top !

Dernier soucis avec ça... au cas ou :
Le survol des 3 div toujours sous IE7 ne fonctionne pas, et là je n'ai pas de piste.

Je vais essayer jquery ie7 hover sur Google en espérant que ça résolve mon soucis.

A tout de suite

PS : pour ceux que ça intéresse, je place ici le CSS du système.

#diapo-actus {
	width: 700px;
}

.large-image-0,
.large-image-1,
.large-image-2 {
	width: 525px;
	background: #000;
	position: relative;
	float: left;
	height: 298px;
}

.large-image-1,
.large-image-2 {
	display: none;
}

.texte-image {
	position: relative;
	bottom: 83px;
	background: #000;
	opacity: 0.75;
	color: #FFF;
	height: 60px;
	padding: 10px;
	font-size: 1.2em;
	line-height: 1.2em;
}

.texte-image a {
	color: #0092EF;
}

.texte-image strong a {
	color: #FFF;
	font-size: 1.2em;
}

#liste-actus {
	float: left;
	width: 173px;
	margin-left: 2px;
}

#liste-actus > div {
	width: 143px;
	height: 83px;
	margin-bottom: 2px;
	background: #000;
	padding-left: 15px;
	padding-top: 15px;
	padding-right: 15px;
}

#liste-actus div:hover {
	background: #0092EF;
}

#liste-actus > div a {
	color: #FFF;
	text-decoration: none;
	font-size: 120%;
}