Transition height CSS3 en JS
Bonjour à tous !
Je dispose de ce code suivant, et je n'arrive pas à appliquer le code js comme du css, je m'explique, en CSS la transtion du height se fait sur la div et son contenu, dans mon code JS, il n'y a que la div qui fait la transition et pas ce qu'il y a à l'intérieur.
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
| <style>
#la_div{
height:18px;
width:900px;
border:1px solid black;
border-radius:5px;
overflow:hidden;
}
#la_div h1{
background:red;
margin:0px;
line-height:18px;
font-size:16px;
}
#la_div iframe{
position:absolute;
z-index:5000;
}
#la_div img{
position:absolute;
z-index:6000;
}
</style>
</head>
<body>
<div id="la_div">
<h1> Changer le volume d'une chanson et l'exporter en mp3</h1>
<iframe id="la_video" frameborder="0" height="506" src="http://www.youtube.com/embed/1cefBcHaz_U" width="900px"></iframe>
<img id="bouton_lecture" src="https://12a14af8-a-62cb3a1a-s-sites.googlegroups.com/site/resolutionrubikscube3x3x3/boutonlecture.png"></img>
</div>
<script>
var Div = document.getElementById('la_div');
var Video = document.getElementById('la_video');
var BTL = document.getElementById('bouton_lecture');
Div.style.cssText = 'transition:height 1s;-moz-transition:height 1s;-webkit-transition:height 1s;-o-transition:height 1s;';
Video.style.display = 'none';
BTL.style.display = 'none';
BTL.onclick = function(){
BTL.flag = true;
};
Div.onmouseover = function(){
this.style.height = '524px';
Video.style.display = '';
BTL.style.display = '';
BTL.style.top = '50px';
BTL.style.left = '50px';
BTL.style.cursor = 'pointer';
};
Div.onmouseout = function(){
if( !BTL.flag){
this.style.height = '18px';
Video.style.display = 'none';
BTL.style.display = 'none';
}
};
</script>
</body> |
Merci de votre aide
