There are several related topics I will cover in this walk-through. I will show you how to have create an animated div, that looks like it is rising out of another div (in this instance a strip of grass) on mouse over. I will also cover how to make the entire div a clickable link that opens in the current browser window as well as how to change the cursor to a pointer (so your users know the div is clickable).
First we want to call your jQuery script. I recommend using Google's jQuery, for the reasons covered here
Here I created a CSS class to set the initial state for the box. Note: You can set the initial state with jQuery, but I found it easier to just use a CSS class. If you are reading this, I am going to assume you are familiar with how to leverage CSS. If you are not, I would reccomend starting here. Having said that, the only item I will explain here is the z-index. I set it to -1 for the initial state so that the div that I want to animate will appear to be behind div I will be using to 'rise' behind.
In this next set of code, I have defined the main parent div, and assigned it style variables directly. Note: you can create an id or class in CSS to do this, but again it is personal preference, it will have no impact on the performance of your animation
This section is where I create the box that will actually be animated. I have one box here, but you will need to modify your code based on whatever fits the layout of your site. If you look at line 10, that is where I've written the line of code to convert the cursor to a pointer so it looks like a link.
If you want to use your animated boxes as part of your navigational system, here is where you make the entire div clickable, instead of having the title or text be your link points.
I also need to create the div that will lay 'on top' of the animation divs to give it that coming out of the ground effect, which is what I am doing here.
Now we launch into creating the actual jQuery to execute the movement. Some browsers, such as Firefox, do not always smoothly handle the rendering of jQuery animations. Therefore, I assigned the div ids to variables in order to help improve performance.
Next, I created the animation itself to execute the box code. We are looking for a mouseover on the first box here, and if the mouse cursor enters the box we will begin the animation. A more complete tutorial explaining the syntax and use of the animate function can be found here. But I will keep it short for the purposes of this particular article.
- marginTop & height: These set the final appearance state of the box we are mousing over
- queue:false: If you do not set the queue to false, your boxes will appear to be resizing themselves on their own, long after you've hovered over the box and left. This is very apparent if you were to remove the queue and move your cursor across the boxes quickly
- duration: This toggle will tell jQuery how long (in milliseconds) to take in order to complete the animation
Thanks to functionality of jQuery, we can append several functions together, in this case I've added the mouseout function to the end of the mouseover function. If you so desire, you could create two CSS classes .start and .end and use jQuery to addClass and removeClass. Your function will work either way. For the purposes of this article I've included the code here so you do not have to scroll up to see what my targets are.
If you want to use your animated boxes as part of your navigational system, here is where you make the entire div clickable, instead of having the title, text or both be your link points.
Here is what the code actually produces
Finally, I have the code all in one place for your viewing pleasure. Happy coding!