Blame the Bot!

by Cameron Bernhardt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<p id="blame">Blame the Bot!</p>
<ul>
  <li>
    <img src="http://i.stack.imgur.com/7nxqo.jpg?s=24" alt="" />It's bjbot's fault!</li>
  <li>
    <img src="http://i.stack.imgur.com/m9xyh.jpg?s=24" alt="" />It's SmokeDetector's fault!</li>
  <li>
    <img src="https://www.gravatar.com/avatar/4f0af2dc52e6ff228e4d69f7e1e8aa5a?s=24" alt="" />It's Shog0's fault!</li>
  <li>
    <img src="https://www.gravatar.com/avatar/6bd562c1aef71c9d715f6b982a5fd71c?s=24" alt="" />It's Moosebot's fault!</li>
  <li>
    <img src="http://i.stack.imgur.com/Wqdib.png?s=24" alt="" />It's xkcdBot's fault!</li>
  <li>
    <img src="http://i.stack.imgur.com/Sej2t.jpg?s=24" alt="" />It's Caprica Six's fault!</li>
</ul>
<br class="clearfix" />
<button id="spin">Not your bot?!</button>

CSS

body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

ul {
  float: left;
  margin-left: 20px;
  height: 24px;
  background-color: #efefef;
  padding: 10px 20px 10px 10px;
  overflow: hidden;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
}

ul li {
  font-size: 20px;
  margin-bottom: 30px;
}

ul li img {
  width: 24px;
  height: 24px;
  margin-right: 5px;
  vertical-align: bottom;
}

#csharp {
  display: inline-block;
  width: 24px;
  margin-right: 5px;
}

#blame {
  float: left;
  font-size: 12px;
  margin-top: 15px;
}

#spin {
  margin: -5px 0 0 15px;
  padding: 1px 3px 2px;
}

#sub {
  font-size: 11px;
  color: #ccc;
  clear: both;
  padding-top: 20px;
}

#sub a {
  color: #346C95;
}

#sub a:hover {
  color: #59B3EF;
}

#sub code {
  font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace;
}

JavaScript

var li = $('ul li'),
  spinBtn = $('#spin');

for (var i = 0; i < 3; i++) {
  li.clone().appendTo('ul');
}

function spin() {
  spinBtn.attr('disabled', true).text('Hang on!');

  li.first().animate({
    marginTop: -(li.first().outerHeight(true) * (Math.floor(Math.random() * li.length * 2) + li.length * 2)) - 2
  }, 5000, 'easeOutQuad', function() {
    spinBtn.attr('disabled', false).text('Spin Again!');
  });
}

spinBtn.click(function() {
  li.first().css('margin-top', 0);
  spin();
  return false;
});

spin();