Question

I found unusual behavior of images when I apply jquery slideToggle effect on it. With some effort I found that sliding effect will only work if image size is defined in pixels(px), but not if size is in percentage.

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();
    });
})

Here is jsFiddle link

Temporary solution for it is to use fadeToggle function instead.

Answer 1

This is solved by simply ensuring that all images are defined with pixel heights. This is actually something you can do dynamically and very simply too:

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

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

I should also point out that px and % in image height/width attributes is not valid.