Division laten verschijnen bij klik

Status
Niet open voor verdere reacties.
G

gast0140

Gebruiker
Lid geworden
12 nov 2009
Berichten
83
Ik wil een division langzaam laten verschijnen door de opacity op te laten lopen. Ik heb dat nu op de volgende manier:

Code: 
<html><head><style type="text/css">

#hidden{
  border: 1px solid red;
  background-color: cyan;
  opacity: 0;
  width: 100px;
  height: 100px;
}

</style><script>

function a(){
  document.getElementById('hidden').style.opacity = .1;
  setTimeout(b,100);
}
function b(){
  document.getElementById('hidden').style.opacity = .2;
  setTimeout(c,100);
}
function c(){
  document.getElementById('hidden').style.opacity = .3;
  setTimeout(d,100);
}
function d(){
  document.getElementById('hidden').style.opacity = .4;
 //etc.
}

</script></head><body>  

<div id="hidden">
  <label>Hidden tekst</label>
</div>
<img src="Image.png" onclick="a()">

</body></html>

Kan dit niet sneller door bijvoorbeeld:

[JS]function a(){
document.getElementById('hidden').style.opacity += .1;
setTimeout(a,100);
}[/JS]

Opmerkingen, vragen en hulp is allemaal welkom!

gast0140.
 
bedoel je zoiets???
HTML: 
<html><head><style type="text/css">

#hidden{
  border: 1px solid red;
  background-color: cyan;
  opacity: 0;
  width: 100px;
  height: 100px;
}

</style></head><body>  

<div id="hidden">
  <label>Hidden tekst</label>
</div>
<div style="width:300px;height:300px;background:#ff0000;" onclick="a()">
&nbsp;
</div>
<script>
var opacity = 0;
var hidden = document.getElementById('hidden');
function a(){
		hidden.style.opacity = opacity;
		opacity+=0.1;
		setTimeout(function(){
				if(opacity!=1)
						a();
		},100);
}
</script>
</body></html>
 
Ja, in principe werkt dit mooi.
Maar wil je het helemaal cross-browser doen, dan moet er nog wat bij: want Internet Explorer 8 (en eerder) ondersteunt de opacity-eigenschap niet. Dat is momenteel meer dan een kwart van de surfers met IE.

Alternatief:
HTML: 
...
<style type="text/css">
#hidden{ /* zonder opacity! */
  border: 1px solid red;
  background-color: cyan;
  width: 100px;
  height: 100px;
}
</style>
</head>

<body>
<div id="hidden">
  <label>Hidden tekst</label>
</div>
<div style="width:300px;height:300px;background:#ff0000;" onclick="fadeIn('hidden')">
  Klik!
</div>

[JS]<script type="text/javascript">
// <![CDATA[

// cross-browser methode om de opacity in te stellen:
function setOpacity(obj, opacity) {
document.getElementById(obj).style.MSFilter = "progid:DXImageTransform.Microsoft.Alpha(Opacity="+opacity+")"; // IE8
document.getElementById(obj).style.filter = "alpha(opacity:"+opacity+")"; // older IE/Win
document.getElementById(obj).style.KHTMLOpacity = opacity/100; // Safari<1.2, Konqueror
document.getElementById(obj).style.MozOpacity = opacity/100; // older Mozilla and Firefox
document.getElementById(obj).style.opacity = opacity/100; // modern browsers
}
setOpacity('hidden', 0); // bij openen pagina op nul zetten

var opacity;

// op te roepen functie voor het infaden:
function fadeIn(obj, opacity) {
if (!opacity){
opacity=0;
}
if (opacity <= 97) {
setOpacity(obj, opacity);
opacity += 1;
setTimeout("fadeIn('"+obj+"',"+opacity+")", 10);
}
else {
clearTimeout(fadeIn);
setOpacity(obj, 100);
}
}

// ]]>
</script>[/JS]
HTML: 
</body>
</html>
 
Bedankt voor de aanvulling csshunter. Dat is inderdaad een betere code die crossbrowser is...
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan