javascript - jQuery Slide Down - 从左上角滑动图片

Question

我有一些用于图像覆盖的 jQuery，它应该使用 slideDown 函数在鼠标悬停时向下滑动。问题是它不是从顶部滑下来而是从左上角增长。请在这里查看:

http://ts564737-container.zoeysite.com/

我的代码如下。任何人都可以告诉我我在 slideDown 函数上做错了什么吗？感谢您的帮助。

HTML 和 jQuery:

<script>
    jQuery(document).ready(function() {
        jQuery(".imageslide").mouseenter(function() {
            jQuery(".overlayimage").slideDown(200, "linear");
        });
        jQuery(".imageslide").mouseleave(function() {
            jQuery(".overlayimage").slideUp(200, "linear");
        });
    });
</script>

<div class="imageslide">
    <img class="normalimage" style="position: absolute" src="https://s3.amazonaws.com/zcom-media/sites/a0iE000000MFs6GIAT/media/mediamanager/menslookup_1.png">
    <img class="overlayimage" style="position: absolute" src="https://s3.amazonaws.com/zcom-media/sites/a0iE000000MFs6GIAT/media/mediamanager/menslookup_2.png">
</div>

CSS:

/* Image Overlay Slide Down (Start) */
.normalimage {
    cursor: pointer;
}

.overlayimage {
    cursor: pointer;
    display: none;
}
/* Image Overlay Slide Down (End) */

Answer 1

.sideDown() 只是为对象的高度设置动画。由于图像没有宽度，因此宽度会随高度变化以保持纵横比。您可以通过为 .overlayimage 提供 width: 100% 样式来解决图像的扩展问题。不幸的是，这会破坏图像的纵横比并导致其拉伸(stretch)，因此您需要采用不同的方法来获得您正在寻找的效果。