Popdown effect (LinkedIn)

by hellosze

HTML

<div id="container">
<div id="text">
I iz a kewt kitten
</div>
<div id="imagek">
    <img src="http://placekitten.com/100/40" class="ima"/>
    I iz one cute bugger.
</div>
</div>

CSS

#container { height: 50px; overflow: hidden; position: relative; }
.ima { position: absolute;}

JavaScript

$(".ima").hover(
    function(){
        $(".ima").animate({"top":"65px"},500); 
    },            
    function(){
        $(".ima").animate({"top":"15px"},500); 
    }   
);

//http://web.enavu.com/tutorials/sliding-door-effect-with-jquery/
/*
$("#imagek").mouseover(function(){
    if( $(this).is(":animated")){ $(this).stop(); }

    $("#imagek").animate({"padding-top":"0px"},500);  
});

$("li").hover(
  function () {
    $(this).append($("<span> ***</span>"));
  }, 
  function () {
    $(this).find("span:last").remove();
  }
);
*/