Comment faire disparaitre une div ?

Bonjour,

Niveau: débutant
Mon DOM comporte une div qui s'ouvre suite à un clic sur un bouton
Je veux que dans la div quand on clic un lien précis, la div disparaissent.
J'ai essayé 2 méthodes animate() et hide () sans succès
Pouvez vous m'aider
Cordialement

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
30
31
32
33
34
35
36
37
38
 
<!DOCTYPE html>
<html>
 
<head>
<meta charset="UTF-8">
 
<style type="text/css">
#cadre_agrandissement {background: blue; position: absolute; top: 50px; left: 50px; width: 0px; height: 0px;}
.fermer a {font-family: "Arial", "Arial Narrow"; font-size: x-large; font-style: normal; font-weight: normal; color: white; text-align: left; margin-left: auto; margin-right: auto ; margin-top: auto;  margin-bottom: auto;}
</style>
 
<head>
 
<body>
<button id="b_tout">Tout afficher</button>
<div id="cadre_agrandissement"></div>
 
 
<script src="jquery.js"></script>
<script>
 
$(function(){
	$('#b_tout').click(function(){
 
		$('#cadre_agrandissement').html('<span class="fermer"><a id="lien" href="#">Fermer</a></span>');
		$('#cadre_agrandissement').animate({ 'height':'970px'}, 500).animate({ 'width': '880px'}, 500)
	}); 
	$('#lien').click(function(){
		...
	}); 	
});  
 
</script>
 
</body>
 
</html>

Dans le div il y a un lien pour fermer le div (<span class="fermer"><a id="lien" href="#">Fermer</a></span>)
j'ai essayé

Code:

1
2
3
4
 
$('#lien').click(function(){
		$('#cadre_agrandissement').hide(500);
});

et

Code:

1
2
3
4
 
	$('#lien').click(function(){
		$('#cadre_agrandissement').animate({ 'height':'0px'}, 500).animate({ 'width': '0px'}, 500)
	});

mais ça ne marche pas le div ne se referme pas quand on clic sur le lien. Pouvez vous m'aider?

Bonsoir

:faq: FAQ jQuery :fleche: on() avec 2 sélecteurs

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
$( function(){
 
    var jObjCadre = $('#cadre_agrandissement');
 
    $( '#b_tout' ).on( "click", function(){
 
        jObjCadre
            .html( '<span class="fermer"><a id="lien" href="#">Fermer</a></span>')
            .animate( {
                'height' : '970px',
                'width' : '880px'
            }, 500 );
 
    });
 
    /*
     * Pour du code dynamique - "#lien", il faut utiliser on() avec
     * deux sélecteurs.
     */
    jObjCadre.on( "click", "#lien", function(){
 
        jObjCadre.animate( {
            'height' : '0px',
            'width' : '0px'
        }, 500 );
 
    });
});

Merci

Merci ça marche
Dans le 2eme function, il faut ajouter .empty() pour vider le contenu de la div sans quoi l'image continue à s'afficher