jQuery dynamic height on list items -

scenario

i have container (there more), list items inside, each containing image. height of container dynamic relative height of list items, change within media query. container has min-height, when images larger idea adjust size of container, slide down.

i'm getting height of images list item when page loads, isn't great quite few images can take while adjust.

unfortunately it's quite large project , wouldn't able replicate scenario in jsfiddle exactly, think close enough.

solution

i need way of getting height of first images' list item loads , making container same height.

code

html

<ul class="container">     <li class="img">         <img src="http://www.lorempixel.com/50/100" width="100%" height="100%" />     </li>     <li class="img">         <img src="http://www.lorempixel.com/50/100" width="100%" height="100%" />     </li>     <li class="img">         <img src="http://www.lorempixel.com/50/100" width="100%" height="100%" />     </li> ...so on </ul> 

css

li {     list-style: none; } .img {     float: left;     height: 100px;     overflow: hidden;     width: 50px; } .container {     border:5px solid green;     width:100%;     overflow: hidden;     min-height:100px; } @media screen , (max-width: 500px) {     .img {         width: 25%; height: auto;     }  } 

js

$(window).load(function() {      $('.container').each(function() {         $(this).animate({             height: $('.img').height(),             slidedown: 'fast'         });     });   });  

demo

http://jsfiddle.net/zwqu7/1/

thankyou time.

or :

$('.container').each(function() {     $(this).find('img').load(function(){         $(this).closest('.container').animate({             height: $(this).height(),             slidedown: 'fast'         });     }) }); 

this way wait images load (so know height of images) , animate after that.

(the li won't have height, img will.)

if want animate container once check like:

$('.container').each(function() {     $(this).find('img').load(function(){         $(this).closest('.container:not(.animated)').animate({             height: $(this).height(),             slidedown: 'fast'         }).addclass('animated');     }) }); 

but animate first image loaded , won't animate after that.