jQuery div hover slide effect

Question

I have this div here:

<div style="
width: 259px; 
height: 201px; 
background-color: #282c2f; 
box-shadow: 0px 8px 10px #000; 
border-radius: 10px; 
border: 2px solid #282c2f;">SHOP</div>

That when a user hovers, the grey box needs to slide down into a teal box. So the new color is shown, and a link is ready to be clicked.

It should slide into:

<div style="
    width: 259px; 
    height: 201px; 
    background-color: #00e7b4; 
    box-shadow: 0px 8px 10px #000; 
    border-radius: 10px; 
    border: 2px solid #282c2f;"><a href="shop.htm">SHOP</div>

Is there anything where I can see an effect similar to this working? Perhaps plugin suggestions? Not sure how to start on this.

Very similar to what I am looking for, except the black disappears as it slides out of the div: http://jsfiddle.net/bUcZg/

Answer 1

You can chain animations in jQuery . If I understand you correctly you could do it like this:

trigger.hover(function() {
    target.animate({top: 0}).animate({opacity : 0});
}

Example: http://jsfiddle.net/bUcZg/21/

Answer 2

I believe this is what you're trying to accomplish. I haven't tested for browser compatibility, so you may want to do that and play around with it. Basically just involved adding an additional div, and using slideDown on the new div.

<div id="newTarget" style="display:none;width:100px; height:100px; background-color:teal; border: teal solid 1px; position:absolute;">
    <a id="newTargetLink" href="#">Link</a>
</div>

http://jsfiddle.net/bUcZg/22/