jquery，动画在使用 .off() 和 .on() 进行 div 时无法正常工作

Question

目的。我有 3 个div 的表单，当您将鼠标悬停在它们上时，将变为动画。一切都很好。当您单击其中一个div （click1，click2，click3） 时，它通过 .off（） 变为非活动状态。（我用来激活 .on（））这里开始了一个问题。当您单击所有div（循环或快速）时，动画无法正常工作。您可以在此处看到的代码 http://jsfiddle.net/46Uj4/1/

$(function () {
    $('#home').click(home = function(h) {          
        if(h.which === 1) {
            $("#home").animate({
                left: '25px'
            });
            $("#home").css({
                'background': '#000000',
                'color' : 'whitesmoke' 
            });    
            $("#home" ).hover(
                function () {
                    $(this).css({
                        'left':'25px'
                    });
                });   
            $("#portfolio,#info" ).hover(
                function () {
                    $(this).css({
                        'left':'35px'
                    });
                },
                function () {
                    $(this).css({
                        'left':'25px'
                    });
                });
            $("#portfolio,#info").css({
                'background': 'purple',
                'color' : 'darkviolet' 
            });
            $('#current').text('text1');
            $("#home").off('click');  
            $("#portfolio").on('click', portfolio);     
            $('#info').on('click', info); 
        }          
    });
    $('#portfolio').click(portfolio = function(p) {        
        if(p.which === 1) {
            $("#portfolio").animate({
                left: '25px'
            });
            $("#portfolio").css({
                'background': '#000000',
                'color' : 'whitesmoke' 
            });    
            $("#portfolio" ).hover(
                function () {
                    $(this).css({
                        'left':'25px'
                    });
                });     
            $("#home,#info" ).hover(
                function () {
                    $(this).css({
                        'left':'35px'
                    });
                },
                function () {
                    $(this).css({
                        'left':'25px'
                    });
                }); 
            $("#home,#info").css({
                'background': 'purple',
                'color' : 'darkviolet' 
            });
            $('#current').text('text2');
            $("#home").on('click', home);  
            $("#portfolio").off('click');     
            $('#info').on('click', info);
        }              
    });   
    $('#info').click(info = function(i) {        
        if(i.which === 1) {
            $("#info").animate({
                left: '25px'
            });
            $("#info").css({
                'background': '#000000',
                'color' : 'whitesmoke' 
            });    
            $("#info" ).hover(
                function () {
                    $(this).css({
                        'left':'25px'
                    });
                });      
            $("#home,#portfolio" ).hover(
                function () {
                    $(this).css({
                        'left':'35px'
                    });
                },
                function () {
                    $(this).css({
                        'left':'25px'
                    });
                });
                $("#home,#portfolio").css({
                'background': 'purple',
                'color' : 'darkviolet' 
            });
            $('#current').text('text3'); 
            $("#home").on('click', home);  
            $("#portfolio").on('click', portfolio);     
            $('#info').off('click'); 
        }            
    });
});

谁知道呢，有什么问题？

Answer 1

.off()必须完全匹配.on()，所以在你有$("#home").on('click', home);的地方，你需要使用$("#home").off('click', home);而不是$("#home").off('click');

我不确定这是否能解决您的问题。

澄清一下：我并不是说在同一个函数中调用 .on（） 和 .off（）。我只是说当你调用 .off（） 时，调用 .on（） 时需要使用相同的参数。