JSFiddle - React, Tailwind, and code Playground

by silverlight

HTML

<div class="titleBar messaging">
  <div class="effectArea">
    <div class="effect"></div>
  </div>
</div>
<input type="button" onclick="startAnim(1300)" value="run effect"/>

CSS

.titleBar {
  background-color : #565862;
  width            : 300px;
  margin-top       : 1px;
  height           : 16px;
  padding          : 4px 0;
  position         : relative;
}
.titleBar .effectArea {
  display  : none;
  width    : 100%;
  height   : 100%;
  position : absolute;
  left     : 0;
  right    : 0;
  top      : 0;
  bottom   : 0;
  overflow : hidden;
}
.titleBar .effectArea .effect {
  width               : 144px;
  height              : 24px; background:url("http://img.majidonline.com/pic/296133/Untitled-1.png") no-repeat;
  display             : inline-block;
  position            : absolute;
  left                : -144px;
}

JavaScript

function startAnim(interval){
setTimeout(function() {
  $('.effectArea').show();
  $('.effectArea .effect').animate({
    left: '400px'
  }, 300, function() {
      $('.effect').css({left:'-144px'});
    $('.effectArea').hide();
  });
  startAnim(interval)
}, interval);
}