title: Storing width values before animation records post animation values
body: <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>