if($('.click').one('click')){
        $('.click').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');
            $('.click').off('click');
        })
    }  
    if ($('.close').one('click')){
        $('.close').click(function(){
        $('.content, .sec').fadeOut(250);

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

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

            $('.mainContent').animate(
                {"height":"-=620px"},
                3500,
                'easeInBack');
            $('.click').on('click');
    })

    } 

the animation is working fine in both ways but I need that users may restart the animation again when its closed. as you can see from the code you do one click and an animation starts, then you select a list of categories which you can close with a click on a "X" like in windows, when you do that the animation start again till all look like as the begin. Now if I click again on it the animation doesnt start no more.

any clue?