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