Sujet Précédent Sujet Suivant

Problème animation sur coin arrondi en jQuery

Guillaume -  
DerkoFR Messages postés 652 Statut Membre -
Bonjour, je cherche a agrandir un div qui a des coins arrondis de manière animé via jquery.
ça marche presque mais pour ce qui est des coins arrondi, jquery ne les agrandis pas de leur taille initial vers leur taille finale, mais toujours en partant de zero pixel...

Quelqu'un aurait une solution ?
CODE HTML 
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<link href="system/styles/springboard.css" rel="stylesheet" type="text/css" />
</head>
<script src="system/scripts/js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function(){
		// Fonction d'ouverture / fermeture d'un dossier du springboard
		$('.folder').click(function() {
			if($(this).attr('data-window-state')=='closed') {
				console.log('function open');
				$(this).animate({
					height: "200px",
					width: "200px",
					borderRadius: "40"
				});
				$(this).attr('data-window-state','opened');
			}
			else {
				console.log('function close');
				$(this).animate({
					height: "100px",
					width: "100px",
					borderRadius: "20"
				});
				$(this).attr('data-window-state','closed');
			}
		});
	});

</script>
<body>

	<div class="folder"	data-window-state="closed"></div>

</body>
</html>


CODE JS 
	$(document).ready(function(){
		// Fonction d'ouverture / fermeture d'un dossier du springboard
		$('.folder').click(function() {
			if($(this).attr('data-window-state')=='closed') {
				console.log('function open');
				$(this).animate({
					height: "200px",
					width: "200px",
					borderRadius: "40"
				});
				$(this).attr('data-window-state','opened');
			}
			else {
				console.log('function close');
				$(this).animate({
					height: "100px",
					width: "100px",
					borderRadius: "20"
				});
				$(this).attr('data-window-state','closed');
			}
		});
	});


CODE CSS 
@charset "utf-8";
.folder {
	background-color: #CCC;
	width:100px;
	height:100px;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
}

2 réponses

Réponse 1 / 2
Pitet Messages postés 2845 Statut Membre 528
 
Salut,

La solution est de définir le radius pour chaque coin dans la fonction animate : 
$(this).animate({
	height: "200px",
	width: "200px",
	borderTopLeftRadius: 40,
	borderTopRightRadius: 40,
	borderBottomLeftRadius: 40,
	borderBottomRightRadius: 40
});


Bonne journée
0
Réponse 2 / 2
DerkoFR Messages postés 652 Statut Membre 74
 
Resolue ?
0

Discussions similaires

Leboncoin mode vacances : mettre en pause toutes ses annonce
Munk87 -
lebon -

4 réponses
Accès à mon compte leboncoin
BARRY -
MPMP10 -

2 réponses
Le bon coin, comment retrouver un pseudonyme ?
HYPERSENSIBLE -
Robin -

8 réponses
Récupérer son compte Leboncoin avec son numéro de téléphone
Nono -
MPMP10 -

6 réponses
Modifier une annonce ou le prix sur Leboncoin sans payer
BourrinOman83 -
Golfman -

19 réponses