Id modifié qui ne réagit pas au clic -> ?
Bonjour,
Je viens de programmer une fonction de type "slide" (voir code ci-dessous) qui marche plutôt bien, à savoir : Quand je clique sur le div de gauche, un nouveau div apparait, de façon progressive... Le hic, c'est que, si je clique à nouveau sur le div de gauche, l'animation ne se fait plus... Si, par contre, je clique sur le div central (Menu_present), là, ça fonctionne !
Autrement dit, bien que j'ai demandé, en fin d'animation, que la div qui se trouve à présent à gauche (<div id="Menu_precedant">) ait son id transformé en "Menu_avant"), c'est le div qui est devenu central qui réagit au clic, comme si il avait toujours l'id "Menu_avant" !
-> Est-ce que quelqu'un saurait m'expliquer ce qui se passe ? Et, peut-être, me proposer une alternative (js ou jQuery) pour que l'affiliation d'un nouvel id "Menu_avant" soit vraiment prise en compte au niveau du clic ?
En vous remerciant par avance ! :)
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
| <html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://souffle56.fr/Site/1-Trouver_les_ressources/Ressources/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://souffle56.fr/Site/1-Trouver_les_ressources/Ressources/js/jquery-ui-1.8.1.custom.min.js"></script>
<style type="text/css">
body
{
background-color: #FFFFFF;
background-image: url("images/Fond.png");
}
#Container_menu
{
left: 150px;
top: 150px;
width: 457px;
height: 400px;
padding: 5px;
background-color: #AA5515;
}
#Menu_precedant
{
width: 0px;
height: 400px;
float: left;
background-color: #FFE0C1;
border-right: 1px solid #B2B2B2;
}
#Menu_avant
{
width: 150px;
height: 400px;
float: left;
background-color: #FFE0C1;
border-right: 1px solid #B2B2B2;
}
#Menu_present
{
width: 150px;
height: 400px;
float: left;
background-color: #FFD9B3;
border-right: 1px solid #B2B2B2;
}
#Menu_apres
{
width: 150px;
height: 400px;
float: left;
background-color: #FED1A5;
border-right: 1px solid #969696;
}
#Menu_suivant
{
width: 0px;
height: 400px;
float: left;
background-color: #FED1A5;
border-right: 1px solid #969696;
}
</style>
<script type="text/javascript">
//<![CDATA[
$(function(){
$('#Menu_avant')
.click(ouverture_precedant)
})
function ouverture_precedant() {
$("#Menu_precedant").animate({
width:'150'
},2900,function(){
$('div').remove('#Menu_suivant');
$('div').remove('#Menu_apres');
/* Remplacement des identifiants suivants */
document.getElementById("Menu_present").id="Menu_apres";
document.getElementById("Menu_avant").id="Menu_present";
document.getElementById("Menu_precedant").id="Menu_avant";
$('<div id="Menu_suivant"></div>').insertAfter('#Menu_apres');
$('<div id="Menu_precedant"></div>').insertBefore('#Menu_avant');
});
$("#Menu_apres").animate({
width:'0'
},2900);
};
//]]>
</script>
</head>
<body>
<div id="Container_menu">
<div id="Menu_precedant">0</div>
<div id="Menu_avant">1</div>
<div id="Menu_present">2</div>
<div id="Menu_apres">3</div>
<div id="Menu_suivant">4</div>
</div>
</body>
</html> |
