Add transition to jQuery .html

Question

How could I 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: all 4s ease-out 1s;
    -moz-transition: all 4s ease-out 1s;
    -o-transition: all 4s ease-out 1s;
    transition: all 4s ease-out 1s;
 }

Not quite the effect I was going for.

Answer 1

This could be my smallest make up to existing code to achieve a fade in

$( '.profile' ).click(function() {
    $('#section1target').hide().html($('.details',this).html()).fadeIn();
});

Answer 2

fiddle demo

judging by your CSS you want a fade?

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

Here's an example with slide + fade:

$( '.profile' ).click(function() {
    var that = 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});
    });
});