Resize Div on Mouseover

Hi All,

I have a "footer" and "footer content". I'd like to hide the "footer content" and show it when the user mouses over the "footer". Or I could shrink the footer content on mouseout and grow it on mouseover. Which do you think would be better? And is it better to use JQuery (or jQuery UI) for this sort of thing? And if so, does anyone know of a plugin that will do the trick? I'd like to animate the thing with some smooth easing, too.

As a side note (important or not?), I am constructing a "one page" website with a fixed footer and header.

Here is the link to the page I am working on http://galileedetroit.org/index2.php. And my HTML and CSS are below:

Code:

---

<footer id="pageFooter">
<div id="pageFooterContent">
</div>
</footer>

---

Code:

---

#pageFooter {
        width: 100%;
        background-color: #666;
    position: fixed;
        bottom: 0;
    /*height: 60px !important;*/
    z-index:100;
}

---

I created a 25 pixel margin above the footer content to use as a trigger area that will "hide/show" or "shrink/grow" the footer content on mouseover.

Code:

---

#pageFooterContent {
        width: 1000px;
        height: 250px;
        margin: 25px auto 0;
        background-color: #FFF;
}

---

Thanks so much!

i would recommend using Jquery animate as it supports easing and is easy to implement. consult their documentation