jQuery Slide Down - Von oben nach links schieben für Bild

Question

Ich habe einige jQuery für ein Bild-Overlay, die bei Hover mit der slideDown Funktion nach unten rutschen sollte. Das Problem ist, dass es nicht von oben nach unten rutscht, sondern von oben links. Bitte sehen sie hier:

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

Mein Code ist unten. Könnte jemand bitte beraten, was ich mit der slideDown Funktion falsch mache, damit es das tut? Danke für Ihre Hilfe.

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() beseelt einfach die Höhe des Objekts. Da das Bild keine Breite hat, wird die Breite mit der Höhe animiert, um das Seitenverhältnis beizubehalten. Sie können die Erweiterung des Bildes beheben, indem Sie .overlayimage einen width: 100% Stil geben. Leider wird dadurch das Seitenverhältnis des Bildes beeinträchtigt und es wird sich dehnen, so dass Sie einen anderen Ansatz wählen müssen, um den gewünschten Effekt zu erzielen.