By now you should have noticed that cool little glass slider in the nav. This was accomplished through the .animate() method that is built into jQuery. Animate is a powerful method that allows you to make all sorts of changes to elements on your page. In case you were wondering the glass slider is bound to a hover event that watches when the mouse moves over an li, grabs the x co-ordinate and then stores that as a variable and uses it to move the slider element to that location on the x-plane. While it sounds tricky it's really only a few lines of code thanks to jQuery.
Let's start with something a little easier. How about moving a box around? While that seems a little lame, it is the foundation for sliding menu's (as used on previous tutorials), or even a country selection box (think old NT).
There are a few ways we can animate something moving across a page, you can either use it's position (if it's an absolute) you can change it's margin, you can even use it's display attribute (jQuery fills in the animation between display:none and display:block). Let's change the margin's up to animate the block in the first Sandbox.
$(document).ready(function(){
$("#sandbox .button").click(function(){
$("#div1 .box").animate({marginLeft: "260px"}, 800);
});
});
On the first line, we set up the standard jQuery initializer. The second line we select the element with the id of sandbox, then drill down to an element with the class name of button and use a .click() method to attach a click-handler to it. We then pass/chain an anonymous function to it that contains our custom animation. For our animation we select the element with the id of div1 and then the element below that with the class of box, and by using the .animtion() method we pass in the property of marginLeft (yes, Camel-Cased) and a value of 260px. the 800 at the end is the speed in which we want this animation to occur (800ms).
Modifing the size of an element is similar, and just as easy.
$(document).ready(function(){
$("#sandbox2 .button").click(function(){
$("#div2 .box").animate({width: "260px"}, 800);
});
});
You can see how versatile the code is, the only thing I changed was the "marginLeft" to "width". Simple and powerful.
Last but not least is the effects that show and hide your elements. Both show() and hide() are methods that you can use to change the css on elements from "display:none" to "display:block". I've used this on the WebTop to hide the "eCom" menu.
$(document).ready(function(){
$("#sandbox3 .button").click(function(){
$("#div .box").fadeOut();
});
});
Notice that because this is not a custom animation I don't have to use the .animate() method, I could, but there's not really a good reason to do that. Check the docs at jquery.com to learn what is built into the core so you don't have to think of a new way to invent the wheel.
.fadeOut() is a method built into the "effects" section of the jQuery core. It's sole purpose is add a nice opacity effect that is compatible across all major browsers that ends with the element hidden (or a display: none).
You may have noticed in the sandbox (on the fading example) that when the box fades out, the bottom button area jumps up to where the box was. This happens due to the element being set to "display: none;", since it's 'not there', there is nothing to hold the bottom bar down. That's not to say that it's impossible to keep the bottom bar from jumping up (you could wrap another div with a set height around it), but it is something to keep in mind when removing/fading elements from your page.
