jquery - Animate が正しく動作しない/最初のホバー後にのみアクティブ化する

Question

編集: これは、modernizr フォールバック .no-csstransition なしで動作するフィドルです: http://jsfiddle.net/xTT5s/12/ (moz/chrome での競合を避けるために css3 イージング効果を削除しました)

まず第一に、私は jQuery にあまり慣れていないので、これはまったく愚かなことかもしれません。

さて、私は IE の CSS3 トランジション (イージング) フォールバックのための jQuery .hover .animate に取り組んでいます。CSS/Jquery フォールバックのコードは次のとおりです。

注: (.no-csstransitions は、css3 セレクターの modernizr フォールバックです)

    section figure {
    width: 220px; height: 220px;
    box-shadow: 0px 0px 3px rgba(0,0,0,0.15);
    overflow: hidden;
    float: left;        
    position: relative;
    margin: 0 40px 40px 0;
}

    section figure figcaption {
    width: 220px; height: 57px;
    background: #474747;
    position: absolute;
    padding: 5px 0 0 10px;
    top: 221px;
    -webkit-transition: all 0.2s ease-out; 
       -moz-transition: all 0.2s ease-out; 
         -o-transition: all 0.2s ease-out; 
            transition: all 0.2s ease-out;
}
section figure:hover figcaption {
    margin-top: -63px;
    -webkit-transition: all 0.2s ease-out; 
       -moz-transition: all 0.2s ease-out; 
         -o-transition: all 0.2s ease-out; 
            transition: all 0.2s ease-out;
}

$(document).ready(function() {
$(".no-csstransitions figure").on({
    mouseenter: function() {
        $('figcaption', this).stop(true, true).animate({top: "221px"}, 300);;
    },
    mouseleave: function() {
        $('figcaption', this).animate({top: "250px"}, 300);;
    }
});
});

1º アニメーションは、最初の .hover の後にのみトリガーされます

2º .hover animate エフェクトは、上部の位置を MAX 219 に設定した場合にのみ発生します。220 を配置すると、エフェクトがトリガーされません。理由はわかりません。

3º .mouseleave 効果はしばらくすると発生し、figcaption は特定の位置に点滅し、その後イージングが発生します...

これは私の wip のプレビュー バージョンです: http://fernandofleury.com.br/preview/portfolio/

オーバーフローを削除します: hidden; ご覧いただけますように。前もって感謝します！