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

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

一个JSFIDLE示例

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

鼠标左键时，文本区域应缩小，仅允许图像可见

以下是我的尝试：

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

---

这个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;

致：

---

这是什么

$（“#.champion”）

。你在抓取一个类或id吗？我不知道它为什么那样复制，修正了它。有一个活生生的例子来看看我在说什么，谢谢！问题是，

.info

被附加到一个内联css样式：

显示：块

，导致它出现在图像下方。我希望它拉伸灰色的容器框以适合文本。还有其他想法吗？在IE9和Firefox 11中，文本显示在图像旁边，如上面的屏幕截图所示。我没有更老的浏览器可看，但我在过去的display:inline block中有过一些运气

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