添加到jQuery .html的转换

Question

我怎样才能顺利过渡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;
 }

不太符合我的目的。

Answer 1

fiddle demo

根据你的CSS判断你想要淡出？

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

这里有an example幻灯片+淡化：

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

Answer 2

这可能是我对现有代码的最小化，以实现淡入淡出

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