1

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

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

我没有办法解决它。你能帮我做一个吗？

4

0 回答 0