Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <button>Change Classes!</button>
  <div id="div" class="red">
    Changing classes with reDraw.
  </div>
  
  <div id="div2" class="blue">
    Changing classes without reDraw.
  </div>
</body>
</html>
 
div {
  width: 100px;
  height: 100px;
  color: white;
}
​
.red {
  background: red;
}
​
.blue {
  background: blue;
}
 
$('button').click(function() {
​
var i = 0;
function flip() {
  reDraw($(div)).then(function() {
    div.className = "blue";
    return reDraw($(div));
  }).then(function() {
    div.className = "red";
    ++i;
    if (i < 200) {
      flip();
    }
  });
}
flip();
​
for (var j=0; j<100; ++j) {
  div2.className = "red";
  div2.className = "blue";
}
  
});
​
function reDraw($element) {
  var deferred = new $.Deferred();
  setTimeout(function() {
    var h = $element[0].offsetHeight;
    var s = $element[0].getComputedStyle;
    deferred.resolve();
  },0);
  return deferred.promise();
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers