0

こんにちは皆さん、私はこのコードを書きました

<script>


            //animate 2 div while clicked on one of the three
    $(document).ready(function(){
        $('.click').one("click", function(){
            $('.mainContent').animate(
                {"height":"+=620px"},
                800,
                'easeInBack');
            $('.eneButton').animate(
                { "top":"+=310px"},
                1500,
                'easeInOutExpo');
            $('.eneButton').animate(
                {"left":"-=310px"},
                1500,
                'easeInOutExpo');
            $('.giardButton').animate(
                {"top":"+=620px"},
                2000,
                'easeInOutExpo');
            $('.giardButton').animate(
                {"left":"-=620px"},
                2000,
                'easeInOutExpo');
                            //turn the close button on
            $('close').on('click');
                            //disable the .click button
            $('.click').off('click');
        });
    });



            //close a div and start animation 
    $('.close').one("click", function(){
        $('.content, .sec').fadeOut(250)

            $('.giardButton').animate(
                {"left":"+=620px"},
                1500,
                'easeInOutExpo');
            $('.giardButton').animate(
                {"top":"-=620px"},
                1500,
                'easeInOutExpo');

            $('.eneButton').animate(
                {"left":"+=310px"},
                1500,
                'easeInOutExpo');
            $('.eneButton').animate(
                { "top":"-=310px"},
                1500,
                'easeInOutExpo');

            $('.mainContent').animate(
                {"height":"-=620px"},
                3500,
                'easeInBack');
                            //turn the .click button on
            $('.click').on('click');
                            //turn the close button off 
            $('.close').off('click');
        });



    //animate the first windows with sub-categories while press the .click button
    $(document).ready(function(){
        $('#riscaldamento li.cont').one("click", function(){
            $('#riscaldamento li.cont').css({'float':'left', 'margin':'5px'});
            $('.content #riscaldamento').animate(
                {"height":"50px", "padding":"30px"},
                1500
            );
        })

        $('#energie li.cont').one("click", function(){
            $('#energie li.cont').css({'float':'left', 'margin':'5px'});
            $('.content #energie').animate(
                {"height":"50px", "padding":"30px"},
                1500
            );
        })

        $('#giardinaggio li.cont').one("click", function(){
            $('#giardinaggio li.cont').css({'float':'left', 'margin':'5px'});
            $('.content #giardinaggio').animate(
                {"height":"50px", "padding":"30px"},
                1500
            );
        })
    });



    //open new windows with the content of every sub-categories
    $(document).ready(function(){
        $('#riscButton').click(function(){
            $('#energie, #giardinaggio, .ene, .ris, .gia').slideUp(1500);
            $('#riscaldamento').delay(100).slideDown('easeOutBounce');
            $('.cont').css({'height':'auto'});
        });
        $('#eneButton').click(function(){
            $('#riscaldamento, #giardinaggio, .ene, .ris, .gia').slideUp(1500);
            $('#energie').delay(100).slideDown('easeOutBounce');
            $('.cont').css({'height':'auto'});
        });
        $('#giardButton').click(function(){
            $('#energie, #riscaldamento, .ene, .ris, .gia').slideUp(1500);
            $('#giardinaggio').delay(100).slideDown('easeOutBounce');
            $('.cont').css({'height':'auto'});
        });
    });
    //click menu secondario per contenuto secondario riscaldamento
    $(document).ready(function(){
        $('#risCont').click(function(){
            $('.ris, .ene, .gia').fadeOut(50);
            $('#secRisc').delay(200).fadeIn(500);
        })
        $('#risCont1').click(function(){
            $('.ris, .ene, .gia').fadeOut(50);
            $('#secRisc1').delay(200).fadeIn(500);
        })
        $('#risCont2').click(function(){
            $('.ris, .ene, .gia').fadeOut(50);
            $('#secRisc2').delay(200).fadeIn(500);
        })
        $('#risCont3').click(function(){
            $('.ris, .ene, .gia').fadeOut(50);
            $('#secRisc3').delay(200).fadeIn(500);
        })
        $('#risCont4').click(function(){
            $('.ris, .ene, .gia').fadeOut(50);
            $('#secRisc4').delay(200).fadeIn(500);
        })

    });
    //click menu secondario per contenuto secondario energie
    $(document).ready(function(){
        $('#eneCont').click(function(){
            $('#secEne1, #secEne2, .ris, .gia').fadeOut(50);
            $('#secEne').delay(200).fadeIn(500);
        })
        $('#eneCont1').click(function(){
            $('#secEne, #secEne2, .ris, .gia').fadeOut(50);
            $('#secEne1').delay(200).fadeIn(500);
        })
        $('#eneCont2').delay(200).click(function(){
            $('#secEne1, #secEne, .ris, .gia').fadeOut(50);
            $('#secEne2').fadeIn(500);
        })
    });
    //click menu secondario per contenuto secondario giardini e piscine
    $(document).ready(function(){   
        $('#giaCont').click(function(){
            $('#secGia1, .ris, .ene').fadeOut(50);
            $('#secGia').delay(200).fadeIn(500);
        })
        $('#giaCont1').click(function(){
            $('#secGia, .ris, .ene').fadeOut(50);
            $('#secGia1').delay(200).fadeIn(500);
        })
    });
        //Nascondo i secondi menu
        $('#riscaldamento,#energie,#giardinaggio').hide();

        //nascondo i contenuti
        $('.ene, .ris, gia').hide();

        //Nascondo i contenuti energie
        $('#secEne,#secEne1,#secEne2').hide();

        //nascondo i contenuti giardini
        $('#secGia, #secGia1').hide();

        //nascondo il noscript
        $('.noscript').hide();
    </script>

class="click" で div をクリックすると、アニメーションが発生し、側面にサブカテゴリ ウィンドウが開きます。このウィンドウには、さまざまなコンテンツを開くための他のリンクがあり、すべてのコンテンツに「X」ボタンがあります。ウィンドウを閉じて、元の位置で div class="click" を再アニメーション化します。問題はここから始まります。class="click" をもう一度クリックすると、アニメーションはもう発生しませんが、サイド ウィンドウだけがサブカテゴリとともに表示されます。最初のアニメーションを再開できるように class="click" を再有効化する方法はありますか?

アニメーションをテストできるリンクは次のとおりです http://satidrotermica.com

よろしくお願いします

4

1 に答える 1

0

私が見つけた解決策はこれです：

$(document).ready(function(){
        $('.click').live('click', function(){
            $('.mainContent').animate(
                {"height":"+=620px"},
                800,
                'easeInBack');
            $('.eneButton').animate(
                { "top":"+=310px"},
                1500,
                'easeInOutExpo');
            $('.eneButton').animate(
                {"left":"-=310px"},
                1500,
                'easeInOutExpo');
            $('.giardButton').animate(
                {"top":"+=620px"},
                1500,
                'easeInOutExpo');
            $('.giardButton').animate(
                {"left":"-=620px"},
                1500,
                'easeInOutExpo');
            //remove the class .click when the animation is done
            //so that the animation, even if you click wont start again
            $('.click').removeClass('click');
        });


    $('.close').live('click', function(){
        $('.content, .sec').fadeOut(250)

            $('.giardButton').animate(
                {"left":"+=620px"},
                1500,
                'easeInOutExpo');
            $('.giardButton').animate(
                {"top":"-=620px"},
                1500,
                'easeInOutExpo');

            $('.eneButton').animate(
                {"left":"+=310px"},
                1500,
                'easeInOutExpo');
            $('.eneButton').animate(
                { "top":"-=310px"},
                1500,
                'easeInOutExpo');

            $('.mainContent').animate(
                {"height":"-=620px"},
                2750,
                'easeInBack');
            //Add class .click to #nav ul li so that when the closing animation
            //is done you can restart all from the begin
            $('#nav ul li').addClass('click');
        });
    });

ご覧のとおり、最初のアニメーションの最後で、すべてをアニメーション化するクラスを削除し、最後のアニメーションの終わりで、すべてが閉じられたときに、DOM #nav ul li でクラスを再度追加します。ボタンをもう一度クリックすると、アニメーションを最初からやり直すことができます。

于 2012-10-25T07:48:51.050 に答える