11548 sujets

JavaScript, DOM et API Web HTML5

[RESOLU] jQuery - Comment animer plusieurs élément en même temps

Bonjour et merci d'avance pour votre aide.

http://www.comfortlimo.be/

Alors comme vous pouvez le voir sur le site, 4 div composé d'un bloc de couleurs et l'autre d'une image. En passant la souris sur l'une des div, les autres perdent en opacité.
Le code ne génére pas d'erreur; Quand je vais sur une div, la quitte et va sur autre, cela fonctionne. Par contre quand je passe d'une div à une autre ... je ne comprend pas.

Alors voici le code:

	<div class="div_content">
		<div class="bt_service" style="margin-left:600px;">
		<img src="images/thumbs/4.gif" width="200" height="200" alt="Our services" style="float:left;">
		<img src="images/thumbs/4.jpg" width="200" height="200" alt="Our services" >
		</div>
		<div class="bt_company">
		<img src="images/thumbs/1.jpg" width="200" height="200" alt="Our company" style="float:left">
		<img src="images/thumbs/1.gif" width="200" height="200" alt="Our company" style="float:left">
		</div>
		<div class="bt_fleet">
		<img src="images/thumbs/2.gif" width="200" height="200" alt="Our fleet" style="float:left">
		</div>
		<div class="bt_reservation">
		<img src="images/thumbs/3.jpg" width="200" height="200" alt="Reservation" style="float:left">
		<img src="images/thumbs/3.gif" width="200" height="200" alt="Reservation">
		</div>
		<div class="bt_fleet" style="margin-left:400px;">
		<img src="images/thumbs/2.jpg" width="200" height="200" alt="Our fleet">
		</div>
	</div>



// JavaScript Document
$(document).ready(function(){
	$('div.bt_service').mouseenter(function(){
		$('div.bt_company').animate({opacity:0.5},500,'easeOutCubic');
		$('div.bt_fleet').animate({opacity:0.5},500,'easeOutCubic');
		$('div.bt_reservation').animate({opacity:0.5},500,'easeOutCubic');
	});
	
	$('div.bt_service').mouseleave(function(){
		$('div.bt_company').animate({opacity:1},500,'easeOutCubic');
		$('div.bt_fleet').animate({opacity:1},500,'easeOutCubic');
		$('div.bt_reservation').animate({opacity:1},500,'easeOutCubic');
	});

	$('div.bt_company').mouseenter(function(){
		$('div.bt_service').animate({opacity:0.5},500,'easeOutCubic');
		$('div.bt_fleet').animate({opacity:0.5},500,'easeOutCubic');
		$('div.bt_reservation').animate({opacity:0.5},500,'easeOutCubic');
	});
	
	$('div.bt_company').mouseleave(function(){
		$('div.bt_service').animate({opacity:1},500,'easeOutCubic');
		$('div.bt_fleet').animate({opacity:1},500,'easeOutCubic');
		$('div.bt_reservation').animate({opacity:1},500,'easeOutCubic');
	});

	$('div.bt_fleet').mouseenter(function(){
		$('div.bt_service').animate({opacity:0.5},500,'easeOutCubic');
		$('div.bt_company').animate({opacity:0.5},500,'easeOutCubic');
		$('div.bt_reservation').animate({opacity:0.5},500,'easeOutCubic');
	});
	
	$('div.bt_fleet').mouseleave(function(){
		$('div.bt_service').animate({opacity:1},500,'easeOutCubic');
		$('div.bt_company').animate({opacity:1},500,'easeOutCubic');
		$('div.bt_reservation').animate({opacity:1},500,'easeOutCubic');
	});
	
	$('div.bt_reservation').mouseenter(function(){
		$('div.bt_service').animate({opacity:0.5},500,'easeOutCubic');
		$('div.bt_company').animate({opacity:0.5},500,'easeOutCubic');
		$('div.bt_fleet').animate({opacity:0.5},500,'easeOutCubic');
	});
	
	$('div.bt_reservation').mouseleave(function(){
		$('div.bt_service').animate({opacity:1},500,'easeOutCubic');
		$('div.bt_company').animate({opacity:1},500,'easeOutCubic');
		$('div.bt_fleet').animate({opacity:1},500,'easeOutCubic');
	});

});


En vous remerciant de votre précieuse aide.
Modifié par Rifton007 (23 Oct 2011 - 02:44)
L'idiot que je suis à trouver la solution juste aprés.
Pourtant j'ai passé une bonne heure dessus à essayer de comprendre

.animate({opacity:1},500,'easeOutCubic');


A remplacer par

.animate({opacity:0.5},{queue:false, duration:500, easing:'easeOutCubic'});


Si non au niveau du code, je me demandais si il y'avais plus simple que toute ma tartine JS ?
Pour tout les bouttons, une seul est même fonction ?

Merci à vous.
Bonjour le monologue, ben finalement au bou de 2h de recherche j'ai trouver la solution.
Donc pour ceux que ça peut aider.
J'ai remplacer les <div> par des <li>



$('.div_content li').mousemove( function () {	
	$(this).animate({opacity:1},{queue:false, duration:500, easing:'easeOutCubic'});
	$('.div_content li').not(this).animate({opacity:0.5},{queue:false, duration:500, easing:'easeOutCubic'});
	}); 
	
$('.div_content li').mouseleave( function () {	
	$('.div_content li').animate({opacity:1},{queue:false, duration:500, easing:'easeOutCubic'});
	});


Ceci remplace toute ma tartine de 40 lignes, finalement je suis content de me mettre au jQuery.
Modifié par Rifton007 (23 Oct 2011 - 02:45)
Sujet clos
Aller à