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 527
 
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

Mettre en pause toutes les annonces leboncoin
Munk87 -
lebon -

4 réponses
Leboncoin envoie vidéo
Aurel560 -
ndmv -

2 réponses
Retrouver son compte leboncoin grâce à son num
Nono -
MPMP10 -

6 réponses
Modifier annonce Leboncoin sans payer
BourrinOman83 -
JMF -

17 réponses
Excel arrondir à 0.5 sup ou inf
cherif222 -
Julbarbo -

7 réponses