textcarousel example

gistfile1.txt

<div id="container">
    This is the 
    <div id="caption">
        <span>best</span>
        <span>ultimate</span>
        <span>excellent</span>
        <span>fantastic</span>
    </div>
    website in town.
</div>
<script>
//$('#caption p:gt(0)').hide();
$("#caption").css("width", $("#caption > span:first-child").width());
$("#caption").css("height", $("#caption > span:first-child").height());
var captionIdx = 0;
var captionItemCount = $("#caption > span").length;
setInterval(function() {
    $("#caption span:eq(" + captionIdx + ")").fadeOut("slow");
    captionIdx = (captionIdx + 1) % captionItemCount;
    var $next = $("#caption span:eq(" + captionIdx + ")");
    $("#caption").css("width", $next.width());
    $("#caption").css("height", $next.height());
    $next.fadeIn("slow");
}, 2000);
</script>
<style>
#container {
    text-align: center;
    border: 1px solid blue;   /* for illustration of size adaption */
    display: block;
}

#caption {
    padding: 0px;
    display: inline-block;
    position: relative;
    vertical-align: bottom;
    
    -webkit-transition: width 0.25s linear;
    -moz-transition: width 0.25s linear;
    -ms-transition: width 0.25s linear;
    -o-transition: width 0.25s linear;
    transition: width 0.25s linear; 
}

#caption > span {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
}

#caption > span:first-child {
    display: inline-block;
}
</style>