Dynamic ellipsis scrolling

Apparently works on Firefox, not so well on other browsers.

HTML

<p>Hover over the red box below and watch the text scroll left!</p>
<div class="container" style="border: 5px solid red; width: 300px; padding: 10px;">
    <div class="content" data-length="200%" style="background: #0f0;">I am text that is really way too long for this box. But I can be scrolled over! (There's a lot more text that does not get rendered.)</div>
</div>
<p>This implementation isn't perfect but it's a great way to reveal long bits of information in a small space.</p>
<p>Now a more real-world use case (with a slight delay on hover):</p>

<div class="frame">
    <h1>Your Accounts</h1>
    <ul class="tabs">
        <li class="container selected">
            <div class="content">Alpha National Bank - xxxx1234</div>
        </li>
        <li class="container">
            <div class="content">Zeta First Investments - xxxx2345</div>
        </li>
        <li class="container">
            <div class="content">Beta Gamma Delta Trusts - xxxx3456</div>
        </li>
    </ul>
</div>

<p><em>Note:</em> This technique does not work with IE9 or earlier.</p>

CSS

body {
    font-family: sans-serif;
    background: #fff;
    color: #000;
}

/* The basic container */
.container {
    overflow: hidden;
    
    /* To make the width of the container exact. */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.content {
    white-space: nowrap;
    position: relative;
    overflow: hidden;    /* Required to make ellipsis work */
    text-overflow: ellipsis;

    /* Starting transition */    
    left: 0%;
    width: 100%;
    
    /* Tweak 'till your heart's content */
    -webkit-transition: left 3s, width 3s;
    -moz-transition: left 3s, width 3s;
    transition: left 3s, width 3s;
}

/* The magic! */
.container:hover .content {
    /* This is not completely accurate. It resizes to 2x the current width. */
    left: -100%;
    width: attr(data-length);
}

/* -------------------------------------------- */

/* STYLES FOR THIS EXAMPLE */

.frame {
    background: #888;
    padding: 10px 0 0;
}

h1 {
    margin: 10px;
    color: #fff;
    text-shadow: 0px 1px 0px #000;
}

ul.tabs {
    border-bottom: 1px solid #666;
    margin: 0;
    padding: 0;
    height: 34px;
    z-index: 1;
}

ul.tabs li {
    display: block;
    float: left;
    border: 1px solid #666;
    background: #eee;
    padding: 10px 10px;
    height: 35px;
    margin-left: 10px;
    width: 150px;
    z-index: 2;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    box-shadow: 0px -3px 3px 0px rgba(0,0,0,0.1);
    color: #666;
}

ul.tabs li.selected {
    background: #fff;
    border-bottom: 1px solid #fff;
    box-shadow: 0px -3px 3px 0px rgba(0,0,0,0.3);
    color: #000;
}

ul.tabs li .content {
    /* This has a slight delay on it. */
    -webkit-transition: left 3s 0.5s, width 3s 0.5s;
    -moz-transition: left 3s 0.5s, width 3s 0.5s;
    transition: left 3s 0.5s, width 3s 0.5s;
}

ul.tabs li:hover {
    color: #000;
   ...

JavaScript

$("li").on("click", function (ev) {
    var $tgt = $(ev.target).closest("li");
    $tgt.addClass("selected")
        .siblings().removeClass("selected");
});