Fade In, Fade Out
I have been fascinated by DHTML (Dynamic HTML) since I learned to script. In a nutshell, DHTML is the art of combining HTML (Hyper Text Markup Language), CSS (Cascading Style Sheets), and JavaScript to create dynamic and interactive Web pages. Using various DHTML methods, elements in the Web document such as text and images can be changed after the page has finished loading. The changes are either initiated by the user, or are executed automatically when certain conditions are met.
JavaScript packs the power to manipulate HTML as well as style elements (CSS). Because of this attribute, JavaScript is the component that allows a Web page to become dynamic. Without a script, a page remains largely static. (CSS can add dynamism, although in a limited way. VBScript can be used but is understood only by Internet Explorer.)
The above example makes use of JavaScript to manipulate the opacity property of the image to simulate a fading effect.
Among the browsers, IE offers the most extensive support of DHTML. It handles a large assortment of transition filters (fade being only one of them), but using transition filters means employing Microsoft proprietary code, which, unfortunately, only IE can interpret. That said, using transition filters will leave visitors on other browsers out in the cold. Employing methods that are cross-browser compatible becomes a key concern when you want to display dynamic elements in other browsers as well.
For a simple fade in/fade out effect, I found out that tweaking the opacity can, to a certain extent, do what Microsoft's fading transition filter can. To be specific, this hack does roughly one half of the job -- you can fade an image, but not blend two images at one go.
Nonetheless, it's a nice trick to create the illusion of a Microsoft transition filter at work. ^_^
The code is longer, but in my opinion, worth it in terms of cross-browser compatibility.
Parameters for controlling the fade in transition are as follows: Start opacity (0 is totally transparent), finish opacity (100 is fully opaque), the incremental value (for transition effect), the interval between loops (in milliseconds). For fade out, the start and finish opacity values are simply reversed.
The values 0 to 100 are Microsoft values (whole numbers). For Mozilla and Netscape, which support the CSS property opacity, the values range from 0 (transparent) to 1.0 (fully opaque) and increments of 0.1. For this script I opted to go by Microsoft values, and then scaling them down for Mozilla and Netscape (value divided by 100).
The JavaScript event handlers would look like this:
Fade in: onclick = "fadeIn('avatar',0,100,8,30)" where 'avatar' is the image name, 0 is the start opacity (transparent), 100 is the finish opacity (opaque), 8 is the incremental value, and 30 is the number of milliseconds between loops.
Fade out: onclick = "fadeOut('avatar',100,0,8,30)"
the values 0 and 100 are reversed, signifying that the image fades out from full opacity to total transparency. The loop exits when the image is totally transparent (value is 0).
Trying out different increments and intervals can reveal interesting results. You can slow down or speed up the time for the fade effect to complete by changing the interval. A higher value means a longer time between loops. You can also increase/decrease the increment value to adjust for the smoothness of the transition. The higher the increment, the rougher or the more discernible the transition (you can see the image "flicker" as it changes opacity, somewhat like a motion freeze), the lower, the smoother. The values I used here make for the smoothest transition possible in the shortest time (IMHO).
This script is long for two reasons: One, it includes two functions (fade in and fade out), and two, it employs two different methods for manipulating opacity -- one for IE and the other for Mozilla and Netscape. IE is known to be less standards-compliant in that some things work only with exclusive methods. Nevetheless, coding for IE means you need no more than a dozen lines of code to achieve a result similar to the script above.
Here is a demo page of Microsoft transition filters that I made a year ago as a study for my photo album, Achromatic Experience (viewable in IE only). You'll see that the transitions work only in Internet Explorer.
Among the browsers, IE offers the most extensive support of DHTML. It handles a large assortment of transition filters (fade being only one of them), but using transition filters means employing Microsoft proprietary code, which, unfortunately, only IE can interpret. That said, using transition filters will leave visitors on other browsers out in the cold. Employing methods that are cross-browser compatible becomes a key concern when you want to display dynamic elements in other browsers as well.
For a simple fade in/fade out effect, I found out that tweaking the opacity can, to a certain extent, do what Microsoft's fading transition filter can. To be specific, this hack does roughly one half of the job -- you can fade an image, but not blend two images at one go.
Nonetheless, it's a nice trick to create the illusion of a Microsoft transition filter at work. ^_^
The code is longer, but in my opinion, worth it in terms of cross-browser compatibility.
function fadeIn(division, startOpacity,
finalOpacity, increment, lapse) {
document.images[division].style.visibility='visible';
if (document.all) {
stepUp=startOpacity + increment;
if (stepUp < finalOpacity) {
document.images[division].style.filter=
'progid:DXImageTransform.Microsoft.Alpha(opacity='
+ stepUp + ')';
nextOpacity=stepUp;
nextFinalOpacity=finalOpacity;
sameDivision=division;
sameIncrement=increment;
sameLapse=lapse;
fadeTimerIn=setTimeout('fadeIn(sameDivision,
nextOpacity,
nextFinalOpacity, sameIncrement,
sameLapse)', lapse);
} else {
clearTimeout(fadeTimerIn);
}
} else {
stepUp=startOpacity + (increment/100);
if (stepUp<(finalOpacity/100)) {
document.images[division].style.opacity=stepUp;
nextOpacity=stepUp;
nextFinalOpacity=finalOpacity;
sameDivision=division;
sameIncrement=increment;
sameLapse=lapse;
fadeTimerIn=setTimeout('fadeIn(sameDivision,
nextOpacity, nextFinalOpacity, sameIncrement,
sameLapse)', lapse);
} else {
clearTimeout(fadeTimerIn);
}
}
}
function fadeOut(whichdiv, startOpacity2,
finalOpacity2, incrementDown, lapse2) {
if (document.all) {
stepDown=startOpacity2 - incrementDown;
if (stepDown >= finalOpacity2) {
document.images[whichdiv].style.filter=
'progid:DXImageTransform.Microsoft.Alpha(opacity='
+ stepDown + ')';
nextOpacityDown=stepDown;
nextFinalOpacity2=finalOpacity2;
sameWhichdiv=whichdiv;
sameIncrementDown=incrementDown;
sameLapse2=lapse2;
fadeTimerOut=setTimeout('fadeOut(sameWhichdiv,
nextOpacityDown, nextFinalOpacity2,
sameIncrementDown, sameLapse2)', lapse2);
} else {
clearTimeout(fadeTimerOut);
document.images[whichdiv].style.visibility=
'hidden';
}
} else {
checkVal=startOpacity2/100;
if (checkVal<1) {
stepDown=startOpacity2 - (incrementDown/100);
} else {
stepDown=(startOpacity2/100) - (incrementDown/100);
}
if (stepDown >= finalOpacity2) {
document.images[whichdiv].style.opacity=stepDown;
nextOpacityDown=stepDown;
nextFinalOpacity2=finalOpacity2;
sameWhichdiv=whichdiv;
sameIncrementDown=incrementDown;
sameLapse2=lapse2;
fadeTimerOut=setTimeout('fadeOut(sameWhichdiv,
nextOpacityDown, nextFinalOpacity2, sameIncrementDown,
sameLapse2)', lapse2);
} else {
clearTimeout(fadeTimerOut);
document.images[whichdiv].style.visibility='hidden';
}
}
}
Parameters for controlling the fade in transition are as follows: Start opacity (0 is totally transparent), finish opacity (100 is fully opaque), the incremental value (for transition effect), the interval between loops (in milliseconds). For fade out, the start and finish opacity values are simply reversed.
The values 0 to 100 are Microsoft values (whole numbers). For Mozilla and Netscape, which support the CSS property opacity, the values range from 0 (transparent) to 1.0 (fully opaque) and increments of 0.1. For this script I opted to go by Microsoft values, and then scaling them down for Mozilla and Netscape (value divided by 100).
The JavaScript event handlers would look like this:
Fade in: onclick = "fadeIn('avatar',0,100,8,30)" where 'avatar' is the image name, 0 is the start opacity (transparent), 100 is the finish opacity (opaque), 8 is the incremental value, and 30 is the number of milliseconds between loops.
Fade out: onclick = "fadeOut('avatar',100,0,8,30)"
the values 0 and 100 are reversed, signifying that the image fades out from full opacity to total transparency. The loop exits when the image is totally transparent (value is 0).
Trying out different increments and intervals can reveal interesting results. You can slow down or speed up the time for the fade effect to complete by changing the interval. A higher value means a longer time between loops. You can also increase/decrease the increment value to adjust for the smoothness of the transition. The higher the increment, the rougher or the more discernible the transition (you can see the image "flicker" as it changes opacity, somewhat like a motion freeze), the lower, the smoother. The values I used here make for the smoothest transition possible in the shortest time (IMHO).
This script is long for two reasons: One, it includes two functions (fade in and fade out), and two, it employs two different methods for manipulating opacity -- one for IE and the other for Mozilla and Netscape. IE is known to be less standards-compliant in that some things work only with exclusive methods. Nevetheless, coding for IE means you need no more than a dozen lines of code to achieve a result similar to the script above.
Here is a demo page of Microsoft transition filters that I made a year ago as a study for my photo album, Achromatic Experience (viewable in IE only). You'll see that the transitions work only in Internet Explorer.
