To start off with, I wanted to title this ‘animations’, but JavaScript libraries such as jQuery can do so much more than just animation. I also did not want to get into teaching Flash.
Why not Flash?
Flash has been a big debate in the web community since its inception. Why? Because Flash is a self contained program running within a browser’s window. This sometimes causes browser crashes when something goes wrong and the browser has no way to compensate. More modern browsers have introduced isolated tabs to deal with this so that when Flash crashes, only the tab is affected.
Another strike against Flash, but which is not the product’s fault, is lack of support on Apple products. Mr. Jobs does not like Flash and therefore does not have support for it on his mobile OS. Thus, your iPad, iPhone, iPod, etc… does not show any Flash media.
So, what is Flash used for then? Flash is mainly used for streaming video, however there are people who use it to build dynamic websites. The film industry is a big user of Flash websites where they can create rich animated content. However, most websites don’t need this because people want quick information, not loading animation, when they visit a site.
So what do you use?
JavaScript.
JavaScript, once the evil monster with a thousand difficult tentacles of coding, has now been compacted into libraries which make code quicker and easier to use. Two script libraries stand out above the others: MooTools and jQuery, with jQuery being the #1 in popularity.
Since jQuery is so popular, and thus has a lot of uses, that is what I’ll be focusing on in this lesson.
Basic jQuery
I’m not going to get too into it since it can go on forever, but I will tell you about the areas and what they do by using a handy dandy image rotator example. What the given example does is that it takes a thumbnail’s link and information and transfers it to a different key set of areas when selected- thereby changing the main image and its description.
A few notes: Properly nesting and closing code is VERY important in jQuery. A misplaced ‘;’ will cause your entire code to fail. For longer scripts finding a mistake is very hard, so be sure to keep notes (by commenting next to the code) on what you have changed.
Commenting in jQuery is easily accomplished. A comment looks like this:
//This is a comment in jQuery
Most code will be well documented with the above style of comments, but it is helpful to keep your own comments around to know what you’ve worked on.
Let’s dissect some code
It’s been my experience that when dealing with more complex codes jumping in and dissecting what the code is and what it does helps immensely with the learning process. Therefore, I’m going to throw a block of code down and then explain every single little piece of it and why it’s there and what it does.
$(document).ready(function() {
$(".main_image_wordbox").show();
$(".main_image_info").animate({ opacity: 0.85 }, 1 );
$(".navi_1 ul li").click(function(){
var imgAlt = $(this).find('img').attr("alt");
var imgTitle = $(this).find('a').attr("href");
var imgDesc = $(this).find('.image_info').html();
if ($(this).is(".active")) {
return false;
} else {
$(".main_image_1 .main_image_info").animate({ opacity: 0 }, 350 , function() {
$(".main_image_1 .main_image_info").html(imgDesc).animate({ opacity: 0.85 }, 350 );
$(".main_image_1 img").attr({ src: imgTitle , alt: imgAlt});
});
}
return false;
});
});
First off: $(document).ready(function() { });
This says that when the document (page) is ready (fully loaded), perform the function (actions) within the {}. This, or a reasonable variant of it, will be on every jQuery script either in the actual plugin or within the page script.
Next, we specify some elements and what we’re going to do with them.
$(".main_image_wordbox").show();
$(".main_image_info").animate({ opacity: 0.85 }, 1 );
The $ specifies a new element in jQuery. The main_image_wordbox that I’m referencing from my CSS is now a primary element that will be acted upon.
The .show() is a jQuery action which tells the script to show the wordbox by default. The ‘;’ closes the statement.
Next comes the information that is displayed within the wordbox. When the info changes, I want to animate it. Thus, I apply the .animate() action to the main_image_info CSS reference. Within the animate action, I set what I want to change/animate. In this case I want to change the property called ‘opacity’ to .85 so I place the properties within {} and specify the speed at which the animation will take place outside of the {} as ‘1’ so that it’s instantaneous/very fast.
Now we come to our main action:
$(".navi_1 ul li").click(function(){ });
When a list item is clicked within an unordered list in the CSS .navi_1 box activate the function within the {}.
var imgAlt = $(this).find('img').attr("alt");
var imgTitle = $(this).find('a').attr("href");
var imgDesc = $(this).find('.image_info').html();
‘var’ designates a variable which can be used over and over throughout the script. Thus, ‘imgAlt’ used further down in the script will naturally refer up to the ‘var’ and say “Oh, ‘imgAlt’ means to do this.”.
$(this) refers to the code above it- in other words $(".navi_1 ul li").click
Thus, the first ‘var’ says when the li is clicked find the image within the li and get it’s attribute of alt.
So what it’s doing is this: <li><img src=”image_thumnail.jpg” alt=”A Blue Building” /></li>
IE: The first ‘var’ translates into- The variable ‘imgAlt’ is equal to ‘when the li is clicked find the attribute of “alt” within the image tag’.
The other 2 variables operate under the same principles.
Now comes your ‘if/else’ statement.
if ($(this).is(".active")) {
return false;
}
If your li is already clicked and therefore has the class of ‘active’ then do nothing. IE: Is animation needed? No? then “return false” – do nothing. ‘else’, if it isn’t already active then do the action within the else tags. Afterwards stop by ‘return(ing) false’ as the action taken is now active.
else { } return false;
Going within the ‘else’ for the heart of your animation
$(".main_image_1 .main_image_info").animate({ opacity: 0 }, 350 , function(){
$(".main_image_1 .main_image_info").html(imgDesc).animate({ opacity: 0.85 }, 350 );
$(".main_image_1 img").attr({ src: imgTitle , alt: imgAlt});
});
The top tells me that when I animate the css elements I want to, by default, animate the opacity to 0 at a speed of 350. I further specify it by saying that within the animation of the objects the function(){} further expounds on what I specifically want done during the animation.
The animation function says that the animation consists of:
1. Replacing the .main_image_info’s html with the variable ‘imgDesc’ information and when doing so to animate the opacity to .85 at a speed of 350.
2. Taking the .main_image_1’s img tag and replacing the attributes of src and alt with the variables ‘imgTitle’ and ‘imgAlt’ information.
Putting it all together
So here’s how the script works:
The page loads and image rotator comes up and the text box appears. Animation instantly changes the text box to have a slightly lower opacity so you can moderately see the image behind it. It stops. Nothing happens until you click a list item (ie: thumbnail) which then takes the link location and alt on the thumbnail and shoves that information into the main image while taking the html out of the CSS class ‘image_info’ and placing that into the text box which at the start of the animation had faded to zero, but now fades back to the original .85 opacity. Animation ends. New image and text are displayed in the rotator.
Tada! You’ve just learned about a jQuery image rotator.
So what about all the other stuff?
Yes, jQuery does a lot more than this, but most of it is easily customizable and come in the form of various plugins. The above example was to give you an insight into how jQuery basically operates/works.
For more information on jQuery and a list of its plugins, go to: http://docs.jquery.com/Main_Page
