jQueryでhoverした要素のみアニメーションさせたい。

例）画像の上に横から黒の帯が出てくるアニメーション
下記のソースですと:beforeのアニメーションがされない。またこのままだとhoverされた要素以外の:beforeもアニメーションしてしまうことになるのですが、どこを直せばいいか分からないです。
----------------------------------------------------------------
<script>
$(’.post a’).on({
’mouseenter’:function(){
$(this).fadeTo(’fast’,.3);
$(’.post a:before’).animate({
’width’:’480px’,
});
},
’mouseleave’:function(){
$(’.post a:before’).animate({
’width’:’0px’,
});
}
});
</script>
<style>
.post {width:480px;height:480px;}
.post a {display:block;position:relative;}
.post a:before {content:"";display:block;width:0;height:480px;backgroud:#000;}
</style>

<div class="post"><a><img></a></div>
<div class="post"><a><img></a></div>
<div class="post"><a><img></a></div>
<div class="post"><a><img></a></div>
<div class="post"><a><img></a></div>

----------------------------------------------------------------

jquery 1.10.2
Chorome確認