Drop Text Inline

Effect from www.gumroad.com In answer to stackoverflow question: http://stackoverflow.com/questions/10044753/jquery-ui-flipping-text-like-in-gumroad-com

by vyder

HTML

<h2>Recipe for Rum Cake:</h2>
<h2>Add 
    <span id="dynamic-text-wrapper">
        <span id="old-text">all the ingredients</span>
        <span id="new-text">all the ingredients</span>
    </span> <br />
    to the cake batter.
</h2>
<br/>
<!-- <span id="debug">Debug:</span> -->

SCSS

$height:30px;
$width:400px;
span {
    display:inline-block;
}
#dynamic-text-wrapper {
    display:inline-block;
    position:relative;
    height:$height;
}
#old-text, #new-text {
    position:absolute;
    display:block;
}
#new-text { display:none; }
#dynamic-text-wrapper, #old-text, #new-text {
    width:$width;
}
h2 {
    font-family: "Helvetica Neue";
    font-size: $height;
    font-weight:700;
    color:lighten(#0E8DBC, 10);
    margin-top:20px;
    margin-left:20px;
    
    text-shadow:0 1px 1px #ccc,
                0 1px 2px rgba(0,0,0,.1);
}

JavaScript

$(document).ready(function() {
    window.ingredients = ["a couple spoons of sugar","a dash of peppermint","a shot of rum","a couple raisins","a cup of cocoa", "some white chocolate"];

//    var debug = $("#debug");
    
    function flipText(newText) {
        flipUp == true ? ($("#new-text").text(newText), $("#old-text").hide("drop", {
            direction: "down"
        }, 300), $("#new-text").show("drop", {
            direction: "up"
        }, 300)) : ($("#old-text").text(newText), $("#old-text").show("drop", {
            direction: "up"
        }, 300), $("#new-text").hide("drop", {
            direction: "down"
        }, 300));
        flipUp = !flipUp; // Alternating flipping direction
    }

    var interval = 2e3; // 2 seconds
    var flipUp = true;
    var index = 0;
    var maxIndex = window.ingredients.length - 1;
    setInterval(function() {
        var nextText = window.ingredients[index];
//        debug.append("<p>"+window.ingredients[index]+"</p>");
        flipText(nextText);
        index = (index == maxIndex) ? 0 : index + 1;
     }, interval);
});