How can I revert a hover opacity effect on `mouseout`? I can get my hover effect to happen without any problems, but I can't seem to undo it's effect.

JSFiddle: <https://jsfiddle.net/3jeezjrb/>

```
<div class="row" style="padding-top:15px">
    <div class="col-xs-6 col-xs-push-3">
        <div class="list-group">
            <a class="list-group-item" href="#">Hello, World</a>
            <a class="list-group-item" href="#">Goodbye, Earth</a>
        </div>
    </div>
</div>

```

JQuery:

```
$(".list-group-item").hover(function() {
    $(this).stop().animate({"opacity": "0.5"});
});

```

I would definitely like to do this effect in JQuery, and not in pure CSS, as I need to add additional functionality afterwards (text overlay).