replace-content-with-effects

by Dmytro Tsiniavskyi

HTML

<div id="content">
    <span>Old content</span>
</div>

<input type="button" value="Test" id="test" />

CSS

div#content{
    padding: 5px;
    border: 1px solid black;
}

JavaScript

$.fn.ReplceWith = function(newContent){
    $(this).fadeOut('slow', function(){
        $(this).html(newContent);
        $(this).fadeIn("slow");
    });
}

$(document).ready(function(){
    $('#test').click(function(){
        var newContent = '<span>New content</span>';
        
        var container = $('#content');
        container.ReplceWith(newContent);
    });
});