Of course, we also want the next image to fade in. To do this, we need to keep track of which direction the fade is going. Add a new property above the fade method, “fadeDirection”, and set it to “out”. By default, we’ll be fading out. Once we finish fading out we’ll set that property to “in”. And once we finish fading in we’ll set it to “out” again.
Remove the “this.imageFrame.parentNode.style.opacity = 1;” line. Instead of going directly to full opacity, we’re going to fade back in.
this.fadeDirection = "out";
this.fade = function() {
var done = false;
var opacity = this.imageFrame.parentNode.style.opacity;
if (opacity=="") {
opacity = 1;
}
if (this.fadeDirection == "out") {
opacity -= .1;
if (opacity <= 0) {
opacity = 0;
this.fadeDirection = "in";
}
} else {
opacity += .1;
if (opacity >= 1) {
opacity = 1;
done = true;
this.fadeDirection = "out";
}
}
this.imageFrame.parentNode.style.opacity = opacity;
if (opacity == 0) {
this.advance();
}
return done;
}
There’s nothing new here. We’ve added an “if” around the opacity reduction: if we’re fading out, reduce the opacity. Otherwise, increase the opacity. When the opacity drops to zero, reverse the fade direction. When the opacity increases to 1, remember that we’re done fading, and reverse the fade direction for the next time.
And yet, when you run this, what happens? The ancient sarcophagi fades out, Carrick Castle starts fading in… and then it stops. It’s as if the opacity isn’t changing. It’ll sit there forever. Put a “window.alert(opacity);” just in front of “this.imageFrame.parentNode.style.opacity = opacity;”.
You’ll be able to see the numbers drop; there are a couple of rounding errors as it drops, but they shouldn’t matter. It starts coming up to “00.1”, and then to… “0.10.1”? And then it just keeps repeating it. What’s that?
JavaScript is a “loosely typed” or “weakly typed” language. This means that you don’t have to care if a particular variable contains a number or if it contains a string of text. If you try to subtract two from five, JavaScript doesn’t care if you originally set up the variables as strings or as numbers.
javascript:window.alert(5-2);
javascript:window.alert("5"-"2");
Some languages don’t let you do that. If you set it up as a string, you can’t do math on it. If you set it up as a number, you can’t treat it as a string of text characters. Scripting languages are often loosely typed; it usually makes them easier to use, especially on the web.
The problem is that JavaScript also supports “operator overloading”. Operator overloading means that some operators (such as the “+” or, in this case, “+=”) can do different things depending on the type of variable they’re applied to.
javascript:window.alert(5+2);
javascript:window.alert("5"+"2");
For numbers, the plus sign adds two numbers together. For strings, the plus sign (and its related operators) concatenates both sides. If any string is involved, JavaScript converts all of the values to a string and concatenates.
Style values are always strings. So while we can get away with “opacity -= .1”, because the minus sign isn’t overloaded, we can’t get away with “opacity += .1”. We need to convert the opacity to a number first. The specific kind of number we need it to be is a “float”, that is, a number with floating decimal points.
For the “if” where we check if the opacity is empty, add an “else” to convert the opacity to a number:
if (opacity=="") {
opacity = 1;
} else {
opacity = parseFloat(opacity);
}
If the opacity is empty, we set it to the number 1. No need to convert that to a number, because “1” without quotes around it is already a number. If the opacity is not empty (“else”), we use JavaScript’s parseFloat function to convert it to a floating point number.
Now, the slides should both fade out and fade in again.
