jQuery Fade with CSS Transitions

So broken! When

by Victor

HTML

<a href="#">Click here to fadeToggle</a>
<div class="testDiv">When you apply an "all" transition to the div, things go crazy. Such a simple fade can be ruined, imagine a much larger setup! You could spend hours trying to figure out just why you're div isn't fading.</div>

CSS

.testDiv {
    padding:10px;
    background:#333;
    color:white;
    
      -webkit-transition: all 500ms ease-out 1s;
    -moz-transition:all 500ms ease-out 1s;
    -o-transition: all 500ms ease-out 1s;
    transition: all 500ms ease-out 1s;
}

JavaScript

$('a').click(function(){
    $('.testDiv').fadeToggle(700);
});