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%樣式來解決圖像的擴展。 不幸的是，這會破壞圖像的長寬比並導致其拉伸，因此您需要采取其他方法才能獲得所需的效果。