jQuery - width/height behavior /w CSS-transitions

by Timmy Willison

HTML

<p>Testing for width/height-behavior for jQuery in connection with CSS-transitions.</p>
<p>Click the green squares. The log-history should display the same values for both squares but it does not because of the transition.</p>
<p>Not working in Safari 5.1, Chrome Stable and Chrome Canary (16), Opera 11.51</p>
<p>Working in Firefox Nightly 10.0a1 and Firefox Stable</p>
<p>Might be a browser-bug / done on purpose by the vendors.</p>

<div class="wrap-1">
    <a href="#trigger-effffffect-1" class="tester-1 something">Normal behavior</a>
</div>

<div class="wrap-2">
    <a href="#trigger-effffffect-2" class="tester-2 something">/w transition</a>
</div>

CSS

.something {
    width: 100px; height: 100px;
}
.wrap-2 .something {
  -webkit-transition: all .2s ease-out;
     -moz-transition: all .2s ease-out;
      -ms-transition: all .2s ease-out;
       -o-transition: all .2s ease-out;
          transition: all .2s ease-out;
}

.bigger .something {
    width: 150px; height: 150px;
}





.wrap-1, .wrap-2 { float: left; display: inline; width: 50%; }
.something { display: block; background: #bada55; text-align: center; }

p { margin: 10px 0; }

JavaScript

// "Normal" behvior
$('.tester-1').click( function() {
    $('.wrap-1').toggleClass('bigger');
});

// Behavior with transition
$('.tester-2').click( function() {
    $('.wrap-2').toggleClass('bigger');
});


// Log sizes
$('.tester-1, .tester-2').click(function() {
    var $this = $(this);
    setTimeout(function() {
        $this.after( 'New width: ' + $this.width() + ', ' + $this.css('width') + '<br>' );
    }, 210);
});