0

目的に。私は 3 つの div を持つフォームを持っています。それらにカーソルを合わせると、アニメーションが表示されます。すべてが良いです。divの1つ（クリック1、クリック2、クリック3）をクリックすると、.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 に答える