Problème animation sur coin arrondi en jQuery

Fermé

Guillaume - 3 déc. 2014 à 13:17
DerkoFR Messages postés 505 Date d'inscription vendredi 7 novembre 2014 Statut Membre Dernière intervention 5 janvier 2017 - 4 déc. 2014 à 14:32

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;
}

A voir également:

Problème animation sur coin arrondi en jQuery
Créer un compte le bon coin - Guide
Temps validation annonce le bon coin - Forum Hotmail / Outlook.com
Le bon coin - Télécharger - Commerce
Arrondi 0.5 supérieur ou inférieur ✓ - Forum Excel
Arrondi 0.5 au nombre inférieur - Forum Excel

2 réponses

Réponse 1 / 2

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
3 déc. 2014 à 14:21

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

Réponse 2 / 2

DerkoFR Messages postés 505 Date d'inscription vendredi 7 novembre 2014 Statut Membre Dernière intervention 5 janvier 2017 74
4 déc. 2014 à 14:32

Resolue ?

Discussions similaires

coin pusher l'arnaque

Excel arrondir à 0.5 sup ou inf

pourquoi annonce le bon coin particulier devenue payante ?

Leboncoin envoie vidéo

Arrondi au 0.5 supérieur dans une formule + condition