Resolving issues on this simple script that clones images into a new Div

I have a fairly simple script that I've tried to write that when a div is clicked, it clones it's children and appends it into a new div. Fairly simple.

I am still a beginner at javascript and jQuery, so there are some issues I am running into that prevents me from getting the exact outcome I am looking for.

Here are some of my issues:

When the box is clicked, I give it a class 'selected'. When a new box is clicked I want the previous box to lose it's class 'selected' and the new box get that class 'selected'. Basically it will show which box is selected.
When a box is clicked, it clones it's children into a new div ('#container'), and then container animates to a height of 500px. When I click a new box, the '#container' fades out it's children, then fades in the new cloned elements. This happens at the same time. How I can make it so the current contents fade out, then the new ones fades in.

I believe those are the two issues I am having. I've been working on it for so long that I've gotten myself confused.

Here is my HTML:

<div id="container">
  <a href="#" class="close">close</a><br>
</div>
<div class="boxContainer">
  <div class="box"><img src="images/places/001.jpg"></div>
  <div class="box"><img src="images/pets/002.jpg"></div>
</div>

Script:

$('.box').click(function() {
        $('#container').children('img').fadeOut();
            $(this).children().clone().fadeIn().appendTo('#container');
            $('#container').delay(100).animate({
                height: 430
            }, 500 ).addClass('opened');
        $(this).addClass('selected');
    });

    $('.close').click(function() {
        $('#container').animate({
            height: 0
        }, 500).removeClass('opened');
        $('#container').children('img').fadeOut();
    });

I would like to continue to use only a single image that is cloned each time into the '#container'.

In the end, I'd like to be able to click an image, the container to slide down and have that image cloned and then faded in. If you click another image WHILE the container is open, it fades out the contents, and then fades in the new cloned image. You'll have the option to close the container, which would fade out it's contents as well.

I hope someone can help, and then explain how they did it if possible.

Here is a fiddle for you: http://jsfiddle.net/ryanjay/Sbkgm/

Thank you!

Solution

I modified you code a bit and moved few things inside callback function to achieve what you want.. Take a look at the fiddle and let me know,

jsFiddle

var $box = $('.box');
var $container = $('#container');

$box.click(function() {
    var $thisBox = $(this);

    if ($thisBox.hasClass('selected')) {
        $container.children('img').fadeOut(function() {
            $(this).remove(); //remove image after fadeout
        });

        $container.animate({
            height: 0
        }, 500, function() {
            $thisBox.removeClass('selected');
        }).removeClass('opened');
    } else {
        $box.removeClass('selected');
        $thisBox.addClass('selected');

        var $thisClone = $thisBox.find('img').clone().css('display', 'none');

        if ($container.children('img').length) {
            $container.children('img').fadeOut(function() {
                $(this).remove(); //remove image after fadeout
                $container.delay(100).animate({
                    height: 430
                }, 500, function() {
                    $(this).append($thisClone);
                    $(this).children('img').fadeIn();
                }).addClass('opened');
            });
        } else {
           $container.delay(100).animate({
                    height: 430
                }, 500, function() {
                    $(this).append($thisClone);
                    $(this).children('img').fadeIn();
                }).addClass('opened');
        }
    }
});

$('.close').click(function() {
    $container.animate({
        height: 0
    }, 500).removeClass('opened');

    $container.children('img').fadeOut(function() {
        $(this).remove(); //remove image after fadeout
    });
});