Ever wish hipsters would just go away? It's as easy as a click.
"Pabst the Hipster" fades gracefully into nothingness, just like all hipsters will someday. How is it done?
The opacity of an HTML object can be changed with javascript using the
opacity style. By default, objects are set to an opacity of 1 (100%):
For
Internet Explorer we need to add an extra piece of code with the
filter style. Setting an element's opacity with the filter style is achieved like this:
style="filter:alpha(opacity=100);"
With the
filter style you must enter opacity as a percent instead of a decimal. So to achieve a cross-browser opacity setting for any given element, use both of the above styles in conjunction thusly:
style="opacity:1; filter:alpha(opacity=100);"
In javascript, an element's opacity can be set using the
opacity object inside the
style object:
<script type="text/javascript">
element.style.opacity = 1;
element.style.filter = 'alpha(opacity=100)';
</script>
An element's
filter style is set in the same way. Once we have cross-browser solution for setting opacity, we can animate a smooth change of opacity using some javascript with the
setTimeout() function.
setTimeout() has two parameters. The first calls a function after the timer has waited for a designated length of time, and the second tells the timeout how long to wait (in milliseconds). Here's an example of what a simple element fade-out would look like:
<script type="text/javascript">
element = document.getElementById('id');
fade = function() {
opacity = element.style.opacity;
opacity = opacity-.01;
element.style.opacity = opacity;
element.style.filter = 'alpha(opacity='+opacity*100+')';
if(opacity<=0) {return false;}
setTimeout(fade);
}
fade();
</script>
Below is the full script that makes Pabst the Hispter disappear above. I works in exactly the same way, except that I've added some extra features to control the speed of the fade, allow for a script to be called when the fade is complete, and a little more automation.
I've also added some cross-browser compatibility code (to help Internet Explorer along.) The "Browser Detect" script is available from
Quirksmode. Feel free to copy and paste the code in your editor of choice and play around with some of the extra parameters.
The entire script:
// FADE IN - OUT ELEMENT
// direction: 1 OR -1 ("1" for fade in; "-1" for fade out. If no value is specified,or if
"0" is entered, element will alternate between in and out.)
// speed: 1->100 ("1" is the slowest speed; "100" is the fastest. Default is "5".
Entering "0" sets to default.)
// hide: TRUE OR FALSE (When fading out, if set to "TRUE", hides the element
after it has completely faded out. Defatul value is "FALSE".)
// show: ANY ELEMENT DISPLAY VALUE (When fading in, sets the display
value of the element if it was previously "none". Default is "block".)
// callback: ANY JAVASCRIPT CODE (runs a script after completion.)
function fade(element,direction,speed,hide,show,callback) {
opacity = element.style.opacity;
if(opacity=='' | opacity==undefined && opacity!='0') {opacity=1;}
if(opacity>1) {opacity=1;}
if(opacity<0) {opacity=0;}
if(element.style.display=='none') {opacity=0;}
element.style.opacity = opacity;
element.style.filter = 'alpha(opacity='+opacity*100+')';
if(!direction | direction==0) {
if(opacity==0) {direction=1;}
else {direction=-1;}
}
if(!show | show=='none') {show='block';}
if(element.style.display=='none' && direction==1) {element.style.display=show;}
if(!speed | speed==0) {speed=5;}
increment = .01*speed*direction;
animateFade = function() {
opacity = eval(opacity+'+'+increment);
if(opacity<=0) {opacity=0;}
if(opacity>=1) {opacity=1;}
element.style.opacity = opacity;
element.style.filter = 'alpha(opacity='+opacity*100+')';
if(opacity==0 | opacity==1) {
if(opacity==0 && hide) {element.style.display='none';}
if(callback) {callback();}
return false;
}
setTimeout(animateFade);
}
animateFade();
}
No Comments for "Javascript Drag & Drop Elements w/ Nils Frykdahl"
Add a comment