jQuery: Why is by box collapsing on first click
<p>The homepage of our website (legendboats.com) is 4 small cells, that if you click on, the large image changes. Pretty standard stuff, but there is a problem.</p>

<p>When you click on one of them the first time, the large area collapses before the new image reappears. This doesn't happen again, you can continue to click on different images, and they will fade in and out properly. Here is the code I'm using:</p>

<pre><code>$('.home_boxes a.content_box').on('click', function(e) {
    e.preventDefault();
    var new_slide = this.hash;
    $('#home_box div.active').fadeOut(function() {
        $('#home_box ' + new_slide).fadeIn().addClass('active');
    }).removeClass('active');

});
</code></pre>

<p>Any ideas on what I'm doing wrong, or any improvements? </p>
