title: How do I make sure a class is added before getting the border width of the element?
body: <p>It seems that when I use jQuery's <code>addClass</code> function adding a class with a 2px border, that it returns the old value at times and not the new when outputting the css in an iframe.  I assume that this happens only sometimes due to how fast the class gets added.  For example:</p>
  
  <p><strong>Stylesheet:</strong></p>
  
  <pre><code>.testBorder {
     border: 2px solid #000;
  }
  </code></pre>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>var iframe = $('#contentFrame').contents();
  var obj = $('#someObj',iframe);
  obj.addClass('testBorder');
  console.log(obj.css('border-top-width')); 
  console.log(obj.css('border-left-width'));
  </code></pre>
  
  <p>The border values outputted are often 0 instead of 2px.  I can do something like:</p>
  
  <pre><code>obj.delay(500).queue(function(){
     console.log($(this).css('border-top-width')); 
     console.log($(this).css('border-left-width'));
     $(this).dequeue();
  });
  </code></pre>
  
  <p>But looking to apply it immediately after the class is added as I use the values to positon correctly to not look like its jumping.</p>
  
  <p>The CSS is being applied and is reflected, so I know it is updating and not being overridden by another style.  </p>
  
  <p>The jQuery version I am using is 1.10.2 with the jQuery Migrate v1.2.1 and I am using the jQuery UI.</p>