Faire apparaitre un div avec animate()

**binco** · 22/11/2014, 00h57

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**SylvainPV** · 22/11/2014, 01h37

- 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

**danielhagnoul** · 22/11/2014, 01h45

Bonsoir

Exemple :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**binco** · 22/11/2014, 23h10

Merci

Faire apparaitre un div avec animate()

jQuery

Discussions similaires

Partager

Partager