javascript - バインド解除後にマウスオーバーイベントをバインドする方法は?

Question

jQueryで素敵なアニメーションを作ろうとしています。私はそのコードを思いつきました：

$(document).ready(function () {

    $('#arrow_up').hide();

    $('#arrow_down').bind({
        mouseenter: function() {
            $('#content')
                .animate({
                    height: '110px'},
                    300);
                },
        mouseleave: function() {
            $('#content')
                .animate({
                    height: '100px'},
                    300);
                }})
        .click(function() {
            $(this)
                .fadeOut( 1000 )
                .unbind('mouseenter')
                .unbind('mouseleave');
            $('#content')
                .animate({
                    height: '300px'},
                    500);
            $('#arrow_up')
                .delay(1000)
                .fadeIn( 2000 );
        });

    $('#arrow_up').bind({
        mouseenter: function() {
            $('#content')
                .animate({
                    height: '290px'},
                    300);
                },
        mouseleave: function() {
            $('#content')
                .animate({
                    height: '300px'},
                    300);
                }})
        .click(function() {
            $(this)
                .fadeOut( 1000 )
                .unbind('mouseenter')
                .unbind('mouseleave');
            $('#content')
                .animate({
                    height: '100px'},
                    500);
            $('#arrow_down')
                .delay(1000)
                .fadeIn( 2000 );
        });

    });

うまく機能していますが、最初だけです。ここで確認できます: http://www.cow-art.eu/test/index.html

下の矢印にカーソルを合わせると、コンテンツ div をアニメーション化したいと考えています。クリックした後、フルサイズにスライドさせ、次のクリック後に部分的に非表示にします。上記のリンクで確認できます。正常に動作していますが、コンテンツを表示および非表示にしない限り、矢印ホバリング アニメーションは動作しています。2 番目のアプローチは、最初のようにアニメーション化することではありません。

クリックイベントがmouseenterとmouseleaveのバインドを解除しており、再度バインドできるイベントが他にないためだと思います。

私はそれを修正する方法のアイデアを使い果たしました。それを手伝ってくれませんか？