jquery - jquery幻灯片效果不适用于以百分比高度定义的图像

Question

当我对其应用 jquery slideToggle 效果时，我发现图像的异常行为。经过一番努力，我发现滑动效果仅在图像大小以像素（px）定义时才有效，但在大小以百分比为单位时无效。

HTML

<a>Click Me</a>

<div class='target'>
    Hello Everyone...<br>
    <img src='http://i.imgur.com/MHfCk2B.jpg' height='200px' />
    <img src='http://i.imgur.com/MHfCk2B.jpg' height='10%' width='30%' />
</div>

jQuery

$(document).ready(function() {
    $('body').on('click', 'a', function() {
        $('.target').slideToggle();
    });
})

这是jsFiddle链接

它的临时解决方案是改用fadeToggle 函数。

Answer 1

这可以通过简单地确保所有图像都用像素高度定义来解决。这实际上是您可以动态且非常简单地执行的操作：

$("img").height(function (_, h) { return h; });

http://jsfiddle.net/SrWdW/2/

我还应该指出，pxand %in image height/ widthattributes 是无效的。