What's causing this position change? Jquery animation
<p>This script works well:</p>

<pre><code>var $count = 4;
var $row = 10;

function across() {
    var $active = $('#slideshow .active .current');
    var $next = $active.next();

    $next.addClass('current');
    $active.animate({ left: '+=100px' }, 800, 'swing').removeClass('current');
    $row += 10;
    $count--;

    if ($count == 0) { 
        $count = 4;
        $row = 10;
        down();
        $($active).stop();
        $('#slideshow .active .bed').animate({ left: '-=100px' }, 1);
        $('.div .bed:first-child').addClass('current');

    }
}
function down() {
    var $active = $('#slideshow .active');
    var $next = $active.next();

    $next.fadeIn("slow").addClass('active');
    $active.fadeOut("slow").removeClass('active');

    if (!$next.length) {
        $("#slideshow .div:first-child").fadeIn("slow").addClass('active');
    }
}
$(function() {
  setInterval(across, 1000);
});
</code></pre>

<p><a href="http://jsfiddle.net/QSfgG/30/" rel="nofollow">http://jsfiddle.net/QSfgG/30/</a></p>

<p>But there is a problem.</p>

<p>On the green parent square, the orange, purple and grey divs slide right across, yet on the other squares, the divs only barely slide onto the left.</p>

<p>It's something to do with the down() function on line 16 of the script. When that's taken out, all of the divs slide on the same amount. However, I can't leave out the down(), as I need it to be called before</p>

<pre><code>$('#slideshow .active .bed').animate({ left: '-=100px' }, 1);
$('.div .bed:first-child').addClass('current');
</code></pre>

<p>on lines 18 and 19. This is so the user doesn't see the divs snapping back to their original position. To clarify, I need the orange, purple and grey divs to slide on the same amount, <strong>and I need the parent div to fade out before the user sees the divs snapping back to their original position.</strong></p>

<p>Thanks for your time!</p>
