Flash-looking animated banner with JQuery

I am trying to create a banner for the top of page, but haven't found any code yet that combines all of what I need. I have included an illustration of what I'm trying to do.

A) I have 4 buttons (each an image file), two to either side default image in the center. This is the main/inactive state.

All of the buttons would have similar animation when hovered over. For the sake of this question, I only illustrated two of the buttons.

B) If you hover over Box 1 (top left), the button would change and text and lines would slide out from left to right. Also, the center image would change. And, to make things extra challenging, the left button and center image would link to Page 1. When you move away, the text slides back to the left, and the image returns to the default state in A. The blue box would behave the same way, linking to Page 2.

C) In a similar manner, if you hover over Box 4 (bottom right), the button would change and text and lines would slide out from right to left. Also, the center image would change. The right button and center image would link to Page 4. When you move away, the text slides back to the right, and the image returns to the default state in A. 开发者_JAVA百科 The green box would behave in the same manner, linking to Page 3.

The closest I've found is this: jQuery image slide on hover effect (horizontal) I was thinking that if I used the static images of all (A) as a background image, maybe I could create a transparent sprite, with only the active version of the hovered button and the center image, to slide left or right on hover.

I can see how the above example might would work for Boxes 1 and 3 (top left and right) and give the illusion of the lines sliding out as the image slides either left or right, but I'm not sure how it would work for Boxes 2 and 4.

Am I on the right track, or am I asking for way more than what's possible in JQuery? I'd be fine with loosing the animated text (I could just make them part of the hover images), but the buttons and center image need to change on hover, and they need to link to a page.

---

I've made a widget in jQuery that was confused with flash before. I think you need to breakdown each element of your widget into discrete pieces. You are making a new widget. There will be no methods doing what you want. You will have to use the .animate() method explained here. http://api.jquery.com/animate/ You will be animating one CSS class to another CSS class using the .animate() method.

This page has a good primer on the animate method. http://viralpatel.net/blogs/2010/03/understanding-jquery-animate-function.html

Here's what I would do:

• I would make the HTML of the page you want.

• I would create CSS of each style of box that you will have.

• I would have all the same CSS directives on every box that will animate. I have found the animate method more agreeable if all CSS that is to be computed has the same parameters but with different values.

• I would use full resolution images in the 4 outer boxes.

• I would animate the div containing the image, not the image itself.

• I would make the image fill the div dynamically so that when I changed the size of the div the image would be a gimmie.

• I would work in firebug testing out different commands and see how they behave. This is critical. The interactive javascript console is your friend.

This is a big task... when you're done this will be a nice feather in your cap! Maybe after that you could turn it into a jQuery plugin for others to use!

---

I decided to mess around with this for a bit, here is what I whipped up so far. No links as yet, but for a half hour I don't feel too bad about that :)

http://jsfiddle.net/BH8s5/3/