Question

我有一些jQuery用于图像叠加，它应该使用slideDown函数在悬停时向下滑动。问题是它不会从顶部向下滑动，而是从左上角开始增长。请在这里看到：

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

我的代码如下。有人可以告诉我slideDown函数我做错了什么吗？谢谢你的帮助。

HTML＆amp; 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%样式来解决图像的扩展问题。不幸的是，这会打破图像的纵横比并导致它伸展，因此您需要采取不同的方法来获得您想要的效果。

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

1 个答案: