Redacted text, reveal on hover!

HTML

<ol class="facts-list">
    <li>
      <p>
        Something goes here
      </p>
    </li>
    <li>
      <p>
        Another thing
      </p>
    </li>
    <li>
      <p>
        MAybe somehing much longer than the rest?
      </p>
    </li>
    <li>
      <span>Also this</span>
    </li>
    <li>
      <span>And this and This</span>
    </li>
    <li>
      <span>Hmmm how far will this go?</span>
    </li>
    <li>
      <span>Who knows, let's see!</span>
    </li>
    <li>
      <span>Come on now!</span>
    </li>
    <li>
      <span>Let's go partay!</span>
    </li>
    <li>
      <span>Ohhhhh yes!</span>
    </li>
    <li>
      <span>BAZINGA!!!!!!!!!!!!!</span>
    </li>
</ol>

CSS

.facts-list li {
    // display: inline-block;
    //position: relative;
    margin-bottom: 3px;
}
.redaction-bar {
    position: absolute;
    z-index: 10;
    top: 0;
    /* left: 0; */
    right: 0;
    height: 18px;
    background-color: #000;
}

JavaScript

$(".facts-list").find("li").each(function (i, el) {
    var $this = $(this),
        $span = $this.find("p"),
        barHTML = "<div class='redaction-bar'></div>",
        barWidth = $span.width(),
        barHeight = $span.height(),
        $barHTML = $(barHTML);

    $this.width(barWidth)
        .height(barHeight);

    $barHTML.width(barWidth)
        .height(barHeight);
    //     .attr("data-left", barWidth);

    $this.on("mouseenter", function (e) {
        $barHTML.stop().animate({
            // left: barWidth
            width: 0
        }, 200);
    });

    $this.on("mouseleave", function (e) {
        $barHTML.stop().animate({
            // left: 0
            width: barWidth
        }, 200);
    });

    // $this.find("span").css("background-color","#000");
    $this.append($barHTML);
});