HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [291]
function fadeOut(){
$(“#content”).fadeOut(“fast”);
} // end fadeOut.
function present(){
alert(“I’m here”);
} // end present
fadeIn() and fadeout() work just like the hide() and slide() techniques. The fading techniques adjust the opacity of the element and then remove it, rather than dynamically changing the size of the element as the slide and show techniques do.
I’ve added one more element to the fadeIn() function. If you supply the fadeIn() method (or indeed any of the animation methods described in this section) with a function name as a second parameter, that function is called upon completion of the animation. When you click the fade-in button, the content div slowly fades in, and then when it is completely visible, the present() function gets called. This function doesn’t do a lot in this example but simply pops up an alert, but it could be used to handle some sort of instructions after the element is visible. A function used in this way is a callback function.
If the element is already visible, the callback method is triggered immediately.
Changing Position with jQuery
The jQuery library also has interesting features for changing any of an element’s characteristics, including its position. The animate.html page featured in Figure 3-3 illustrates a number of interesting animation techniques.
You know what I’m going to say, right? This program moves things around. You can’t see that in a book. Be sure to look at the actual page. Trust me, it’s a lot more fun than it looks in this screen shot.
Figure 3-3: Click the buttons, and the element moves.
This page illustrates how to move a jQuery element by modifying its CSS. It also illustrates an important jQuery technique called object chaining and a very useful animation method that allows you to create smooth motion over time. As usual, look over the entire code first; I break it into sections for more careful review.
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Animation Demo
This content will move in response to the controls.
Creating the framework
The HTML always forms the foundation. This page is similar to the hideShow page, but I decided to use a real form with buttons as the control panel. Buttons are not difficult to use, but they are a little more tedious to code because they must be inside a form element as well as a block-level