jquery - 将鼠标悬停在图像上时创建简单的 jQuery 滑动效果

Question

当有人将鼠标悬停在我页面上的图像上时，如何创建这种简单的 jQuery 效果？

可以在此处找到JSFiddle 示例。

我希望当有人输入图像或框的任何部分时，文本区域应该扩大以显示更多细节。

在鼠标离开时，文本区域应该缩小并且只允许图像可见。

这是我的尝试：

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