将鼠标悬停在图像上时创建简单的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/