Hello, I want to use javascript to fade in a layer after the user click a button. please help me I want to that animation to work in Internet Explorer and Firefox, I searched on google and found. obj.filters.alpha.opacity, but it doesn't seem to work.
Please Help Me.
The quick answer is that IE supports filter: Alpha(Opacity=80); and most DOM browsers support opacity: 0.8; -- and remember, all children of the alpha element will inherit the alpha state as well.
Then using a window.setInterval() method to create the animated effect.
Of course, using IE's proprietary method will create errors in FF and probably others, but that only matters if you want error-free code. :-)
Also, check out this site if you want cool weighted animation effects to your animation ...
http://www.actionscript.org/forums/showthread.php3?t=42833
I've attached a zip file with a little image gallery that uses some of these effects (not the fade in/out, but zoom in/out and scroll left/right) as further example -- I made this for another thread and a fun project, but I can't find that thread on DaniWeb right now.
Let me know if I can help out more on this one.
Cheers
The long answer is something like this...
fade.html
<html>
<head>
<style type="text/css">
body {
padding: 60px;
background: silver;
}
#fade {
width: 80px;
padding: 100px;
color: white;
font-weight: bold;
font-family: Arial;
white-space: nowrap;
background: black;
border: 1px solid indigo;
}
</style>
<!--[if IE ]>
<script type="text/javascript">
var IE = true;
</script>
<![endif]-->
<script type="text/javascript">
window.onload = function () {
var fade = document.getElementById('fade');
var fader = document.getElementById('fader');
if ( typeof IE == 'boolean' ) {
fade.style.filter = 'Alpha(Opacity=100)';
} else {
fade.style.opacity = 1;
}
var step = 10;
fader.onclick = function () {
var visible = this.name;
this.name = ( visible == 'true' ) ? 'false' : 'true';
var engine = window.setInterval( function () {
step = ( visible == 'true' ) ? step - 1 : step + 1;
if ( step < 0 || step > 10 ) {
window.clearInterval( engine );
return;
}
if ( typeof IE == 'boolean' ) {
fade.style.filter = 'Alpha(Opacity=' + step * 10 + ')';
} else {
fade.style.opacity = ( step / 10 );
}
}, 100 );
};
};
</script>
</head>
<body>
<div id="fade">FADE ME</div>
<input type="button" id="fader" name="true" value="Toggle Fade" />
</body>
</html>No errors and works in latest versions of IE, FF, and Opera but it has no fault-tolerance since if you click the button in the middle of a fade in/out it freaks out and doesn't allow you to fade it again ... would need to account for that.
Cheers
...
Thanks a lot langsor, the solution i figured out is that hide the button while the layer is animating.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.