Skip to content

Instantly share code, notes, and snippets.

Created January 30, 2014 06:19
What would you like to do?
textcarousel example
<div id="container">
This is the
<div id="caption">
website in town.
//$('#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());
}, 2000);
#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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment