Bonus strike CSS

activate.js

$('#bar').removeClass('new').addClass('activated');

bar.css

#bar {
  width: 600px;
  height: 60px;

  position: relative;

  background-color: rgba(153, 153, 153, 0.3);  
  border-right: solid 5px white;

  -moz-transition-property: left;
  -webkit-transition-property: left;
  -o-transition-property: left;
  transition-property: left;
  -moz-transition-duration: 1.5s;
  -webkit-transition-duration: 1.5s;
  -o-transition-duration: 1.5s;
  transition-duration: 1.5s;

}

#bar.new {
  left: 0;
}

#bar.activated {
  left: 600px;
}

listen.js

$('#bar').bind(CSS3_TRANSITION_END, function () {
  //... do stuff
});

stop.js

$('#bar')css({ left: $('#bar').css('left') });

transitionend.js

// Adapted from the Modernizer source code

var transEndEventNames = {
  'WebkitTransition' : 'webkitTransitionEnd',
  'MozTransition'    : 'transitionend',
  'OTransition'      : 'oTransitionEnd',
  'msTransition'     : 'msTransitionEnd', // maybe?
  'transition'       : 'transitionEnd'
}, 

CSS3_TRANSITION_END = transEndEventNames[ Modernizr.prefixed('transition') ];