Storing width values before animation records post animation values
<p>Its getting a bit late so excuse me if I am making a stupid mistake. For some reason the following code:</p>

<pre><code>$(".myClass").each(function(){
    widths[$(this).attr("id")] = $(this).width();   
    if ($(this).attr("id")  != $(clickedExpand).attr("id"))
    {
        $(this).animate({
            width: '10px'
        });
    }

});
</code></pre>

<p>The array is initialized as</p>

<pre><code>var widths = new Array();
</code></pre>

<p>earlier in the code. For some reason, despite the fact that I am recording the the widths before the animation begins, I am getting post-animation values in the array. It seems as though the animation finishes and then the values get recorded. I have tried to take it out of the function and wrap it in another .each but I am getting the same result.</p>

<p>Any help is would be greatly appreciated!</p>

<p>entire code:</p>

<pre><code>var slateWidths = {};
$(".slateExpand").click(function(){
    var clickedExpand = $(this).closest(".slate");

    $(".slate").each(function(){
        slateWidths[$(this).attr("id")] = $(this).outerWidth();   
        if ($(this).attr("id")  != $(clickedExpand).attr("id"))
        {
            $(this).animate({
                width: '10px'
            });
            $(this).find($('.slateExpand')).hide();
        }

    });

    $(this).text("Restore");
    $(this).removeClass("slateExpand").addClass("slateRestore");
    $(".slateRestore").on("click",function(){

        $(".slate").each(function()
        {
            alert(slateWidths[$(this).attr("id")]);
            //var width = slateWidths[$(this).attr("id")];
            $(this).animate({
                width: slateWidths[$(this).attr("id")]
                });
        });
    });
});
</code></pre>
