Fade effect...
Ik wil graag dat een groen balkje met Gelukt boven aan de pagina weergeven wanneer een actie gelukt is. Nou is het zo dat dat balkje ook weer op moet donderen na 2 seconden.
Krijg dat voor elkaar, alleen, het gaat zo knetter hard. Ik wil eigenlijk dat hij wegfade zeg maar.
Ik heb nu dit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
setInterval(disap, 2000);
function disap()
{
var een = document.getElementById('een');
if(een.style.display == 'block')
{
een.style.display = 'none'
}
}
</script>
<div id="een" style="display: block; background: #32A905; height: 40px; text-align:center; line-height: 40px; color: white; font-size:medium;">
Gelukt!
</div>
setInterval(disap, 2000);
function disap()
{
var een = document.getElementById('een');
if(een.style.display == 'block')
{
een.style.display = 'none'
}
}
</script>
<div id="een" style="display: block; background: #32A905; height: 40px; text-align:center; line-height: 40px; color: white; font-size:medium;">
Gelukt!
</div>
Gesponsorde koppelingen:
- ouderen
- kinderen
- dyslecten (1 op de 3 mensen is in Nederland dyslectisch, echter weet niet iedereen die dyslectisch is, dat hij of zij dat heeft)
Maar goed na deze opmerking(en):
misschien heb je hier wat aan:
jquery
Dan vaagt hij weg.
Nu wil ik dat hij pas na 2 seconden begint met faden. Hoe doe ik dat?
<script type="text/javascript">
setInterval(disap, 100);
function disap()
{
var een = document.getElementById('een');
een.style.opacity = een.style.opacity - 0.1
}
</script>
Kijk naar css3 transitions, en voor IE-support css3pie
