Wait with Link until Animation is Finished

by Marius Jopen

HTML

<div class="wrapper">

<div class="box b1">
  http://www.facebook.com
</div>

<div class="box b2">
  http://www.google.com
</div>

</div>

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: 1s ease-in;
}

.b1 {
  background-color: red;
}

.b2 {
  background-color: yellow;
}

.clicked {
  background-color: blue;
}

JavaScript

var boxnumber = $(".wrapper > div").length;
var i;

for (i=1;i <= boxnumber;i++){

(function(i) {    
  var b = $(".b" + i);

  $(b).click(function() {
    $(b).addClass("clicked");
    $(b).on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd',
      function() {
        var link = $(b).text();
        window.open(link)
      });
  });
})(i);

}