jQuery向下滑动-从左上滑动图像

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%样式来解决图像的扩展。 不幸的是，这会破坏图像的长宽比并导致其拉伸，因此您需要采取其他方法才能获得所需的效果。