Question

我有一个div。在div内部是另一组div，每个div都包含一个img。我试图设置一个鼠标，使用.hover（）和.animate（）使当前的img扩展。我希望代码能够确定它是横向还是纵向图像，然后在宽度或高度上展开它，不要超过包含div的边界。

这是文档准备好的代码。

$('.clGalleryImage').hover(function() {
    $varHeight = $('.clGalleryImage:hover').height();
    $varWidth = $('.clGalleryImage:hover').width();
    if($varHeight > $varWidth) {
        $('.clGalleryImage:hover').animate({marginTop:0, height:125}, 'slow');
    } else {
        $('.clGalleryImage:hover').animate({marginLeft:0, width:125}, 'slow');
    }
}, function() { 
    ...
});

.hover的handlerOut部分是不完整的，所以忽略它。问题在于handlerIn。当我将鼠标悬停在一个肖像img上时，该功能效果很好。图像的宽度和高度按比例增长，并在包含div的边界处停止生长。但当我将鼠标悬停在风景img（上面代码中的其他内容）上时，它只会在宽度上增长，而不是按比例增长。这是设计吗？

如果这是一个新手问题，我很抱歉，但它一直困扰着我。最终，我将其编码为围绕我选择的图像手动工作。我希望代码可以处理图像的任何比例，然后在使用之前编辑图像。

由于

我想我应该包括div和CSS。

div

<div class="clGalleryImageContainer">
    <img class="clGalleryImage" src="/New/Images/Molds/Molds001_th.jpg" alt="Mold Gallery Image 001" title="This is some description Text." />
</div>

CSS

.clGalleryImage { display:block; height:100px; margin-left:auto; margin-right:auto; margin-top:12px;}
.clGalleryImageContainer { position:relative; float:left; width:150px; height:125px; border: 1px solid white; background-color:black; margin-top:12px; margin-left:21px; margin-bottom:12px;}

Answer 1

您在CSS height:100px;中设置了高度，因此.animate()将尊重此样式并将其保留在整个动画中。在另一个动画中，你明确地告诉它改变高度，所以它会。

所以答案是是，这是设计的。

.animate（）中<img/>的宽度和高度问题

1 个答案: