將鼠標懸停在圖像上時創建簡單的jQuery滑動效果

Question

當某人懸停在我的頁面上的圖像上時，如何創建此簡單jQuery效果？

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工作對我來說：

$("#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(); 

在你的CSS地址：

color: white; 

到：

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

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