Question

Hi guys I have written this code

<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>

Now, how you can see while I click the div with class=”click” an animation happend and a sub-categories windows open on the side, this windows has other links to open the various content, every content has a “X” button to close the windows and re-animate the div class=”click” in the original position.
The problems starts here, if I click again the class=”click” the animation doesnt happend anymore but just the side windws appear with the sub-categories . any idea how to reable the class=”click” so that I can restart the first animation?

here is the link where you can test the animation
http://satidrotermica.com

thank you in foreings

Answer 1

Ok the solution I found is this:

$(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');
        });
    });

As you can see on the end of the first animation I remove the class that animate all, and on the end of the last animation, the closing one, when everything is closed I add again the class at the DOM #nav ul li so that I can re-click the buttons and the animation can start again from the begin.