JQuery Slide up

This should be quite simple to do in JQuery. I can get it to partially work but not fully.

All I need to have is an image in a <div> with another image that covers the bottom section partially. When I mouse over the image or the image partially covering it, the partially covering image开发者_StackOverflow中文版 slides up to completely cover the first image and that top image is a link to another page etc. When I mouse out the slide is reversed back to it's original position.

Any ideas on this, I was thinking of using the slide() and toggle() methods maybe?

Thanks

Jamie

you can use hover() for this

$(object).hover(
   function()
   {
      $(this).slideUp();
   },
   function()
   {
      $(this).slideDown();
   }
);

I created an example on jsbin.com that might help you out. You can view the source to see how it works or you can click the link in the top right to edit the source.

http://jsbin.com/ibero4/3

I believe toggle() binds functions to click events, not mouseover events, so you wouldn’t want that.

slide() in jQueryUI sounds like it’d fit the bill, but you could just use animate in jQuery core (jQueryUI is quite a hefty additional download).

Thanks for all the help guys. I finally used the following code adapted from a tutorial on nettuts.com:

 HTML:

    <li><span><img src="<1st.jpg" alt="about us" /></span><a href="about-us"><img src="1st.gif" class="move" alt="about us" /></a></li>
<li><span><img src="<2nd.jpg" alt="about us" /></span><a href="about-us"><img src="2nd.gif" class="move" alt="about us" /></a></li>
<li><span><img src="<3rd.jpg" alt="about us" /></span><a href="about-us"><img src="3rd.gif" class="move" alt="about us" /></a></li>
<li><span><img src="<4th.jpg" alt="about us" /></span><a href="about-us"><img src="4th.gif" class="move" alt="about us" /></a></li>

   CSS:

ul#slidenav {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    font-size: 1.1em;
}
ul#slidenav li{
    margin: 0;
    padding: 0;
    overflow: hidden;  /*--Important - Masking out the hover state by default--*/
    float: left;
    height:190px;

    display:inline-block;
}



#slidenav-container {
    margin-top: 40px;
}



ul#slidenav a, ul#slidenav span { 
    padding: 0px;
    float: left;
    text-decoration: none;
    clear: both;
    width: 100%;
    height: 131px;
    background-color:transparent;


}

jQuery:




    jQuery("#slidenav li").hover(function() {   //On hover...
                    jQuery(this).find(".move").stop().animate({
                        marginTop: "-131" //Find the <img> tag and move it up 131 pixels
                    }, 250);
                } , function() { //On hover out...
                    jQuery(this).find(".move").stop().animate({
                        marginTop: "0"  //Move the <img> back to its original state (0px)
                    }, 250);
                });