解绑后如何绑定鼠标悬停事件？

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设置动画。单击后我想将其向下滑动到完整尺寸，然后在下一次单击后 - 将其部分隐藏。您可以在上面提供的链接上查看。它工作正常，但箭头悬停动画正在工作，除非我显示和隐藏内容。第二种方法不是将它作为第一种方法制作动画。

我认为这是因为click事件解除了mouseenter和mouseleave的绑定，并且没有其他事件可以再绑定它。

我没有想法如何修复它。你能帮帮我吗？