HTML and CSS Reference
In-Depth Information
Because the function to be applied is a fade-in effect, CSS is used to make sure the image is not ini-
tially shown through the
display: none
declaration:
#fadePhoto {
display:none;
}
Now you're ready to add the JavaScript code to the script that calls the
fadeIn()
function of the
jQuery library. To make sure that the document is fully loaded before any code is invoked, jQuery
uses a special function,
$(document).ready()
. The full code for the jQuery
fadeIn()
function is
very short:
<script type=”text/javascript”>
$(document).ready(function(){
$(“#fadePhoto”).fadeIn(1000);
});
</script>
Essentially, this script is saying that when the document is ready, fade in the image with the id of
#fadePhoto
for a duration of 1,000 milliseconds, or 1 second. The transition is very smooth, as
shown in Figure 22-2, where the picture has faded in about 50 percent.
FiGure 22-2
