Faire apparaitre un div avec animate()

Version imprimable

Bonjour

Dans mon DOM j'ai un div et je souhaite que celui ci prenne forme et s'agrandisse quand on clic un bouton
Je veux que ça se fasse avec la méthode animate ()
J'ai tenté le code suivant mais ça ne marche pas. Pouvez vous m'aider?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <body> <button id="b_tout">Afficher div</button> <div id="cadre_agrandissement"></div> <script src="jquery.js"></script> <script> $('#b_tout').click( function() { $('#cadre_agrandissement').animate({ 'height':'300px'}, 1500) .animate({ 'width': '200px'}, 1500) .animate({ 'background-color':'blue'}, 1500); }); </script> </body>

22/11/2014, 00h37
SylvainPV

- jQuery ne sait pas animer les couleurs
- Il faut mettre un CSS de base à ton div pour espérer voir quelque-chose

http://jsbin.com/mixagizobu/1/edit?html,output

Bonsoir

Exemple :

Code:

1
2
#b_tout { margin: 12px; }
#cadre_agrandissement { display: none; position: relative; width: 0; height: 0; margin: 12px; background-color: white; }

Code:

1
2
<button id="b_tout">Afficher div</button>
<div id="cadre_agrandissement"></div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$( function(){
 
    $( '#b_tout' ).on( "click", function( ) {
 
        /*
         * animate : <a href="http://api.jquery.com/animate/" target="_blank">http://api.jquery.com/animate/</a>
         * 
         * easing et color nécessite jQuery UI
         */
        $( '#cadre_agrandissement' )
            .show()
            .animate(
                { 
                    "height" : "300px", 
                    "width" : "200px",
                    "background-color" : "blue" 
                }, 
                {
                    "duration" : 1500,
                    "specialEasing": {
                        width: "linear",
                        height: "easeOutBounce"
                    }
                }
             );
 
    });
 
});

J'ai testé ce code avec :

Code:

1
2
3
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/sunny/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>

22/11/2014, 22h10
binco

merci

Merci