javascriptでキャプションのオーバーレイをアニメーション化するにはどうすればよいですか？

Question

ときtheimageオーバー、マウス、黒のキャプションは、ここに示されたもののようにそれの一部をかけてくるように私はそれを作りたい絵を持っている：あなたが使用している場合は、これを試してみてください

http://wonderwall.msn.com/

Answer 1

これは、あなたが始める必要があります。

http://jsfiddle.net/AlienWebguy/cGQZh/

HTML：

<div class="img_wrapper"> 
    <img src="http://www.digital-photography-school.com/wp-content/uploads/2007/11/flower.jpg" width="350" height="350" /> 
    <div class="img_caption"> 
     This is a flower 
    </div> 
</div> 

はJQuery：

$(function(){ 
    $('.img_wrapper').mouseover(function(){ 
     $(this).children('.img_caption').animate({ 
      top:'-50px' 
     },300); 
    }); 

    $('.img_wrapper').mouseout(function(){ 
     $(this).children('.img_caption').animate({ 
      top:'0px' 
     },300); 
    }); 
}); 

CSS：

.img_wrapper { 
    width:350px; 
    height:350px; 
    overflow:hidden; 
    position:relative; 
} 

.img_caption { 
    height:50px; 
    width:100%; 
    text-align:center; 
    opacity:0.7; 
    color:#FFF; 
    background-color:#000; 
    font-weight:bold; 
    position:relative; 
    z-index:2; 
} 

Answer 2

jQueryライブラリは

$("imageSelector").append("div", {position:"relative", display:"none"}) 
.html("The content which you want to show in the div on mouseover") 
.mouseover(function(){ 
    $(this).find("div").animate({ top: -1*$(this).height() }, 500); 
}) 
.mouseout(function(){ 
    $(this).find("div").animate({ top: 0 }, 500); 
});