I am trying to find a function that can fade an element from a specified transparency to a specified transparency. For example from 0 to .7 but everything I can find just fades either from 0 to 1 or 1 to 0. I can't find anything that lets you specify from what to what. My attempts of reverse engineering the functions I have found have also failed as every example I have found has been pretty cryptic.
Also I want to do this WITHOUT any frameworks.
Thanks!!
There is no particular trick to it, you just set the opacity style to something other than 0 or 1 repeatedly in a timeout/interval.
Here's a stripped down fade function you can use as a starting point.
<script type="text/javascript">
function fade(element, o0, o1, t) {
// IE compatibility. Detect lack of native 'opacity' support, and ensure element
// has layout for IE6-7.
//
var canopaque= 'opacity' in element.style;
if (!canopaque && 'currentStyle' in element && element.currentStyle.hasLayout===false)
element.style.zoom= '1';
function setOpacity(o) {
if (canopaque)
element.style.opacity= ''+o;
else
element.style.filter= 'alpha(opacity='+Math.round(o*100)+')';
}
var t0= new Date().getTime();
setOpacity(o0);
var interval= setInterval(function() {
var dt= (new Date().getTime()-t0)/t;
if (dt>=1) {
dt= 1;
clearInterval(interval);
}
setOpacity(o1*dt+o0*(1-dt));
}, 25);
}
</script>
<p id="foo"> hello. </p>
<button onclick="fade(document.getElementById('foo'), 0.7, 0, 2000);">fade 0.7 to 0</button>