Add transition to jQuery .html -

Add transition to jQuery .html -

how smoothly transition jquery .html?

http://jsfiddle.net/usmau/1/

$( '.profile' ).click(function() { $('#section1target').addclass( "show-details" ); $('#section1target').html($(this).find(".details").html()); }); .show-details { display:block;background:#f6f6f6;padding:30px;margin:0 30px 20px 0;font-size:15px;line-height:25px; -webkit-transition: 4s ease-out 1s; -moz-transition: 4s ease-out 1s; -o-transition: 4s ease-out 1s; transition: 4s ease-out 1s; }

not quite effect going for.

fiddle demo

judging css want fade?

$( '.profile' ).click(function() { var = this; $('#section1target').fadeto(400,0,function(){ $(this).html($('.details', that).html()).fadeto(600,1); }); });

here's an example slide + fade:

$( '.profile' ).click(function() { var = this; var h = $('#section1target').height(); $('#section1target').animate({height:'toggle', opacity:0},h?400:0, function(){ $(this).html($('.details', that).html()).animate({height:'toggle', opacity:1}); }); });

jquery