rehabilitating a button

Question

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?

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 I've removed the .one() function and used the .live(), on the end of the first animation I remove the class with .removeClass('click') that animate all, and on the end of the last animation, the closing one, when everything is closed I add again the class with $('#nav ul li').addClass('click') so that the buttons, when clicked, the animation can start again from the begin.