画像の上を移動するときにjQueryスライドの効果を簡単に作成する

Question

ページ上の画像に誰かが画像を重ねると、この単純なjQuery効果をどのように作成できますか？

A JSFiddle例can be found here。私は、誰かが画像またはボックスのいずれかの部分に入るときたい

は、テキストエリアには、詳細を明らかに拡大すべきです。

マウスを離すと、テキスト領域が縮小され、画像のみが表示されます。

$("#free-roster .roster-container .champion").mouseenter(function() { 
    $(this).find(".info").animate({ width: "116px" }, 400); 
}); 

$("#free-roster .roster-container .champion").mouseleave(function() { 
    $(this).find(".info").animate({ width: "0px" }, 400); 
}); 

Answer 1

このjQueryのは、私の作品：あなたのCSSのアドオンで

$("#free-roster .roster-container .champion").mouseenter(function() { 
    $(this).find(".info").animate({ width: "116px" }, 400); 
}); 

$("#free-roster .roster-container .champion").mouseleave(function() { 
    $(this).find(".info").animate({ width: "0px" }, 400); 
}); 

$("#free-roster .roster-container .champion").mouseleave(); 

：

color: white; 

へ：

#free-roster .roster-container .champion .info 

ここで

は私の試みです

http://jsfiddle.net/9EFsE/1/