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

【问题标题】：Creating a simple jQuery sliding effect when hovering over an image将鼠标悬停在图像上时创建简单的 jQuery 滑动效果
【发布时间】：2012-04-10 02:15:48
【问题描述】：

当有人将鼠标悬停在我页面上的图像上时，如何创建这种简单的 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);
});

【问题讨论】：

这是什么$("#.champion")。你抢的是班级还是身份证？
我不知道为什么它会那样复制，修复它。有一个活生生的例子来看看我在说什么，谢谢！

标签： jquery image jquery-animate

【解决方案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/

【讨论】：

这个问题是 .info 被附加到内联 css 样式：display:block 这导致它出现在图像下方。我希望它拉伸灰色容器框以适合文本。还有其他想法吗？
在 IE9 和 Firefox 11 中，文本显示在图像旁边，如上面的屏幕截图所示。我没有旧版浏览器可供查看，但过去我在 display: inline-block 方面遇到了一些运气