resize DIV matching the new content with jquery

I have a DIV which shows one image at once coming from an ajax script, the images are all different in height and are showed with fadeIn/fadeOut (just for the tag)

How can I allow to resize the DIV (that contains the img tag of course) "sliding" based on the new content before the images that fadein changes the DIV height very rudely? :P

Tha开发者_开发技巧nks

You need to use the jquery animate function to change the width and height of the div.

Hope this helps.

Have you tried using lightbox? It might do all you are talking about here, sans having to write it yourself. It can be heavily customized with CSS and uses animation.

Well do Something like this

$(".change").click(function() {
  $(".mydiv").fadeOut('slow');
  $(".myimg").attr("src",'');    
  $(".myimg").attr("src","linktonewimage.jpg");
  var newheight = $(".myimg").height();    
  $(".mydiv").css("height",newheight+"px");
  $(".mydiv").fadeIn('slow');
});

I am assuming you have a <img> tag with myimg class inside a div with mydiv class.

Check the DEMO HERE