Problème animation sur coin arrondi en jQuery
Guillaume
-
DerkoFR Messages postés 505 Date d'inscription Statut Membre Dernière intervention -
DerkoFR Messages postés 505 Date d'inscription Statut Membre Dernière intervention -
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
CODE JS
CODE CSS
ç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
- Modifier annonce le bon coin sans payer ✓ - Forum Services en ligne
- Rechercher un vendeur sur le bon coin - Forum Vos droits sur internet
- Push the coin avis - Forum Consommation & Internet
- Le bon coin, comment retrouver un pseudonyme ? - Forum Réseaux sociaux
