[Résolu] Garder la position final d'une DIV après son déplacement au

Bonsoir,

Alors voilà mon petit soucis,
J'ai plusieurs DIV (8) disposées en rond qui, lors de leur survol se déplacent au centre. Jusque la tout va bien (sauf le fait que l'on doit rester au survol de la div durant son déplacement).

Mon vrai soucis est le suivant : Lorsque la DIV a atteint sa position final (au centre), comment faire pour qu'elle garde sa place final même quand j'enlève ma souris du survol.

#mariage {
margin-top:20px;
margin-left:400px;
width:100px;
height:100px;
background-color:#c0c0c0;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
-moz-box-shadow: 0px 0px 10px #343434;
-webkit-box-shadow: 0px 0px 10px #343434;
-o-box-shadow: 0px 0px 10px #343434;
box-shadow: 0px 0px 10px #343434;
position:absolute;
transition-property: color, width, height, margin-left, margin-top;
-moz-transition-property: color, width, height, margin-left, margin-top;
-webkit-transition-property: color, width, height, margin-left, margin-top;
-o-transition-property: color, width, height, margin-left, margin-top;  
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s; 
text-align: center;
}
#mariage:hover {
   width: 150px;
   height: 150px;
   margin-top: 295px;
   margin-left: 375px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s; 
}

Si possible rester en CSS3 mais sinon je suis pas contre du javascript malgré que je ne le maitrise pas plus que ça.


Merci d'avance pour votre aide !

Cordialement

BlAzAk

Bonsoir,

Après avoir testé le bout de code donné, je pense qu'une solution à base de JavaScript s'impose d'office... Suivre le mouvement de la "bulle" avec le curseur pour visualiser l'animation jusqu'au bout est bien trop contraignant et saccade complètement cette dernière.

Voici une solution très simple à base de JQuery qui permet d'obtenir, je pense, le résultat escompté.

CSS :

body {
	margin: 0;
	padding: 0;
}

#mariage {
	position: absolute;
	width: 100px;
	height: 100px;
	margin-top: 20px;
	margin-left: 400px;
	background-color: #c0c0c0;
	text-align: center;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	-moz-box-shadow: 0 0 10px #343434;
	-o-box-shadow: 0 0 10px #343434;
	-webkit-box-shadow: 0 0 10px #343434;
	box-shadow: 0 0 10px #343434;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

JavaScript :

$(function() {
	$("#mariage").hover(function() {
		$(this).css("width", "150px");
		$(this).css("height", "150px");
		$(this).css("margin-top", "295px");
		$(this).css("margin-left", "375px");
	});
});

Pour que cela fonctionne, il faut préalablement télécharger la librairie JQuery (si ce n'est déjà fait) à l'adresse suivante : http://docs.jquery.com/Downloading_jQuery et la lier au fichier HTML. Ensuite, il s'agit d'inclure les quelques lignes de JavaScript au sein d'un fichier "script.js" par exemple et de le lier lui aussi.

Le script change simplement les valeurs des propriétés CSS au survol de l'élément, par contre la transition s'effectue bel et bien via la propriété CSS3 transition qui capte les changements de valeurs apportés en JS et qui fluidifie tout ça pour un beau rendu

Merci jeremy-p le résultat est exactement celui recherché !

Ce sujet passe en résolu, mais je vais être un peu gourmand, sais-tu comment puis-je faire pour que lorsque je survol une autre div, celle du centre reprenne sa place/taille initiale pour laisser place a la nouvelle ?

Encore merci pour ta réponse simple, rapide, et efficace !

Cordialement

BlAzAk

Voici un code qui devrait répondre à vos attentes :

HTML :

<div id="mariage" class="bulle"></div>
<div id="divorce" class="bulle"></div>

CSS :

body {
	margin: 0;
	padding: 0;
}

.bulle {
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: #c0c0c0;
	text-align: center;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	-moz-box-shadow: 0 0 10px #343434;
	-o-box-shadow: 0 0 10px #343434;
	-webkit-box-shadow: 0 0 10px #343434;
	box-shadow: 0 0 10px #343434;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

#mariage {
	margin-top: 20px;
	margin-left: 20px;
}

#divorce {
	margin-top: 20px;
	margin-left: 140px;
}

JavaScript :

var infosAncienneBulle = new Array();

$(function() {
	$(".bulle").mouseenter(function() {
		survolBulle($(this));
	});
});

function survolBulle(bulle) {
	bulle.css({
		"width": "150px",
		"height": "150px",
		"margin-top": "295px",
		"margin-left": "55px"
	});
	bulle.unbind("mouseenter");
	basculerBulles(bulle);
}

function basculerBulles(nouvelleBulle) {
	if(infosAncienneBulle.length != 0) {
		var bulle = $("#" + infosAncienneBulle[0]);
		var positionY = infosAncienneBulle[1];
		var positionX = infosAncienneBulle[2];
		bulle.css({
			"width": "100px",
			"height": "100px",
			"margin-top": positionY,
			"margin-left": positionX
		});
		bulle.mouseenter(function() {
			survolBulle($(this));
		});
	}
	infosAncienneBulle[0] = nouvelleBulle.attr("id");
	infosAncienneBulle[1] = nouvelleBulle.css("margin-top");
	infosAncienneBulle[2] = nouvelleBulle.css("margin-left");
}

Cela manque cruellement de commentaires pour expliquer le pourquoi du comment, mais globalement :

- Côté CSS, on crée une classe "bulle" permettant de regrouper la palanquée de styles communs à toutes les bulles, ce qui évite des règles longues et répétitives.
De plus, cela permet dans le JS de déclencher des actions sur tous les éléments portant cette classe.

- Côté JS, on utilise l'événement "mouseenter" qui est plus indiqué que "hover" que j'avais utilisé dans mon premier post.
À l'entrée de la souris sur l'élément, on change les propriétés de ce dernier et on appelle une fonction "basculerBulles()" qui va faire deux choses. Premièrement, elle réinitialise les dimensions et le positionnement de la bulle précédemment activée (s'il y en a une). Deuxièmement, elle stocke l'identifiant et les valeurs initiales de positionnement de la bulle survolée, afin que l'on soit en mesure de les réinitialiser plus tard.
La seule subtilité : on doit désactiver les actions de survol sur la bulle une fois qu'elle a été survolée grâce à cette instruction :

"bulle.unbind("mouseenter");"

Du coup, il faut penser à activer à nouveau ces actions lorsque la bulle est revenue à son état de base :

bulle.mouseenter(function() {
	survolBulle($(this));
});

Bonjour,

Désolé pour ce temps d'absence, j'ai donc essayé le nouveau code. Merci pour les explication je crois avoir compris la façon de procédé.

En revanche, les bulles vont bien au centre au survole mais ne reprenne pas leur place initiale au survole d'une autre bulle.

J'ai essayé de trouvé l'erreur avant de vous déranger une nouvelle fois mais sans succès...

Si vous pensez savoir d'où vient ce problème ?

Merci encore

Cordialement


Edit : J'ai du faire une erreur quelque part, mais j'ai repris le code et ça marche c'est tout bon merci beaucoup !
Modifié par BlAzAk (22 Apr 2012 - 13:52)

Testé et approuvé sur tout les navigateurs sauf... IE ><





Une idée ?

Salut tu peux opter pour un commentaire conditionnel pour ie pour appeler une feuille de style qui corrigera les bugs:

<!--[if IE]> <link type="text/css" rel="stylesheet" href="styles-ie.css" /> <![endif]-->

IE se comporte comme s'il ne voyait pas :

"margin-top": positionY,
"margin-left": positionX

et

<!--[if IE]> <link type="text/css" rel="stylesheet" href="styles-ie.css" /> <![endif]-->

n'arrangerait pas mon problème car "margin-top et left" son compatible tout navigateur normalement ? non ?
Modifié par BlAzAk (22 Apr 2012 - 16:25)