displaying a hidden div with a scroll down effect using jquery on hover

Question

I would like to create a feature so when the user hovers over the LI, a div crawls down using jquery easing.

JsFiddle: http://jsfiddle.net/WZvPk/2/

This is what i have so far:

HTML

<div class="sectorWrapper">
<ul class="sectors">
    <li>
    <div class="sectorGrid">
    <div class="sectorTextWrapper">
    <a href="/en-us/sectors/introtosectors/examplesectorpage.aspx" target="_self">
    <div class="sectorTitle">
    Sector 1
    </div>
    </a>
    </div>
    <div class="sectorImage">
    <a href="/en-us/sectors/introtosectors/examplesectorpage.aspx" target="_self"><img alt="" style="width: 193px; height: 88px;" src="http://i40.tinypic.com/34dpi8o.jpg" /></a>
        <div style="margin-top:-30px; display:none;" class="showme">View project</div>
        </div>
    </div>
    </li>
    <li>
    <div class="sectorGrid">
    <div class="sectorTextWrapper">
    <a href="/en-us/sectors.aspx" target="_blank">
    <div class="sectorTitle">
    Sector 2
    </div>
    </a>
    </div>
    <div class="sectorImage">
    <a href="/en-us/sectors.aspx" target="_blank"><img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" /></a>
         <div style="margin-top:-30px; display:none;" class="showme">View project</div></div>
    </div>
    </li>
    <li>
    <div class="sectorGrid">
    <div class="sectorTextWrapper">
    <a href="/en-us/sectors.aspx" target="_blank">
    <div class="sectorTitle">
    Sector 3
    </div>
    </a>
    </div>
    <div class="sectorImage">
    <a href="/en-us/sectors.aspx" target="_blank"><img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" /></a>
        <div style="margin-top:-30px; display:none;" class="showme">View project</div>
        </div>
    </div>
    </li>
    <li>
    <div class="sectorGrid">
    <div class="sectorTextWrapper">
    <a href="/en-us/sectors.aspx" target="_blank">
    <div class="sectorTitle">
    Sector 4
    </div>
    </a>
    </div>
    <div class="sectorImage">
    <a href="/en-us/sectors.aspx" target="_blank"><img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" /></a>
        <div style="margin-top:-30px; display:none;" class="showme">View project</div>
        </div>
    </div>
    </li>
    <li>
    <div class="sectorGrid">
    <div class="sectorTextWrapper">
    <a href="/en-us/sectors.aspx" target="_blank">
    <div class="sectorTitle">
    Sector 5
    </div>
    </a>
    </div>
    <div class="sectorImage">
    <a href="/en-us/sectors.aspx" target="_blank"><img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" /></a>
        <div style="margin-top:-30px; display:none;" class="showme">View project</div>
        </div>
    </div>
    </li>
    <li>
    <div class="sectorGrid">
    <div class="sectorTextWrapper">
    <a href="/en-us/sectors.aspx" target="_blank">
    <div class="sectorTitle">
    Sector 6
    </div>
    </a>
    </div>
    <div class="sectorImage">
    <a href="/en-us/sectors.aspx" target="_blank"><img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" /></a>
        <div style="margin-top:-30px; display:none;" class="showme">View project</div>
        </div>
    </div>
    </li>
    <li>
    <div class="sectorGrid">
    <div class="sectorTextWrapper">
    <a href="/en-us/sectors.aspx" target="_blank">
    <div class="sectorTitle">
    Sector 7
    </div>
    </a>
    </div>
    <div class="sectorImage">
    <a href="/en-us/sectors.aspx" target="_blank"><img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" /></a>
        <div style="margin-top:-30px; display:none;" class="showme">View project</div>
        </div>
    </div>
    </li>
    <li>
    <div class="sectorGrid">
    <div class="sectorTextWrapper">
    <a href="/en-us/sectors.aspx" target="_blank">
    <div class="sectorTitle">
    Sector 8
    </div>
    </a>
    </div>
    <div class="sectorImage">
    <a href="/en-us/sectors.aspx" target="_blank"><img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" /></a>
        <div style="margin-top:-30px; display:none;" class="showme">View project</div>
        <br />
    </div>
    </div>
    </li>
</ul>
</div>

CSS:

/*force the image size to be set by css*/
div.sectorImage a img
{
    width:193px;
    height:88px;
}

div.showMe
{
    display:block;                
}

.sectorGrid
{
    position:relative;
}

jquery

$("ul.sectors li").hover(
  function () {
    $("div.sectorImage div.showme").css("display", "block");
  },
  function () {
    $("div.sectorImage div.showme").css("display", "none");
  }
);

The idea is when the user hovers over the section it will slowely drop the hidden div at the bottom allowing them to click the "view project" link.

I am having problems making this work with just one LI, if you test the jsfiddle you can see display:block seems to work but for all the LI, which is wrong.

Could you help me now that ive explained better?

Answer 1

If you change this

$("div.sectorImage div.showme").css("display", "block");

to this

$(this).children(".sectorImage").children(".showme").css("display", "block");

you'll be showing only one div