0

达到目的。我有 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'); 
        }            
    });
});

谁知道，有什么问题？

4

1 回答 1

-2

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

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

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

于 2013-11-13T23:56:30.297 回答