JQuery Slide up

Question

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 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

Answer 1

you can use hover() for this

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

Answer 2

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).

Answer 3

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

Answer 4

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);
                });