home.css.scss

strong {
  display: inline-block;
	font-weight: normal;
	overflow: hidden;
	margin-top: 2px;
	position: relative;
	vertical-align: top;

	span {
		display: block;
		position: absolute;
		white-space: pre;
	}
}

home.html

<h1>
  SOLVING THE AGE-OLD QUESTION OF<br>
	<q>&ldquo;</q>WHERE SHOULD WE EAT <strong><span>ON Friday?</strong><q>&rdquo;</q>
</h1>

home.js.coffee

times = ["Tonight?", "Tomorrow?", "This Weekend?", "Next Week?", "Right Now?"]
timeChangeCount = 5

# Get the span and set initial width
$span = $tagline.find("span")
$when = $tagline.find("strong").css {width: $span.width(), height: $span.height()}

changeTime = ()->
    if timeChangeCount < times.length
        $span = $when.find("span")

        # Create a new span and set it beneath the old one
        $newSpan = $('<span/>',
            html: times[timeChangeCount]
            style: "top:30%;opacity:0"
        ).appendTo($when)
        
        # Animate the new width to containing strong
        $when.animate {width: $newSpan.width(), height: $newSpan.height()}, 250

        # Out with old, in with the new
        $span.animate {opacity:0}, 200, ()->
            $newSpan.animate {top:0, opacity:1}, 800, "easeOutElastic", ()->
                $span.remove()
                timeChangeCount++
                setTimeout(changeTime, 1500)
        
setTimeout(changeTime, 2000)