Q:

Slide Animation of div with centered text

My web application has a listener for barcode scans.  How I got that working is another story.
Anyhow, I need to be able to alert the user when a scan is detected and if the back-end processing that ingested that scan was successful.
To help with that I have taken 2 divs and overlaid them.
The bottom div has some text that says "Ready To Scan" and the top div has some text that describes that status of the last scan.  So basically, the way this will work, the user will "scan" something and then the div will display 100% of it's width some message that says "OK" or "Stop!" or "Do something..." depending on some business logic.  But about 2-3 seconds later I want that div to slide to the left exposing the bottom div that says "Ready to scan".  That way the user can continue scanning and they are aware that their last scan was "accepted."
Here is the code.  To get the div to slide - hit the space bar.:

var counter = 0;         
  window.onkeyup = function(e) {
    var key = e.keyCode ? e.keyCode : e.which;
    if (key == 32) {
      if (counter == 0) {
        slide();
      }
    }   
  }   
  function slide() {
    var $lefty = $('#scanner-status-error');
    var $percentage = $lefty.outerWidth() -     ($lefty.outerWidth() * .15);
    $lefty.animate({
      left: parseInt($lefty.css('left'),10) == 0 ?
        -$percentage : 0  
    });
  } 
#scanner-status {
  position: relative;    
}
#scanner-status img {
   display: inline-block;
   max-width: 15px;
   margin-right: 3px;
}
#scanner-status-ready {
   top: 0;
   left: 0;
   width: 100%; 
   position: absolute;     
   vertical-align: middle;
   text-align: center;  
   background-color: #939598;
   max-height: 28px;   
   font-family: "Times New Roman", Times, serif;
   font-weight: bold; 
}
#scanner-status-error {
  top: 0;
  left: 0;
  width: 100%;
  position: absolute;    
  vertical-align: middle;
  text-align: center;  
  background-color: #e54a5c;
  max-height: 28px;   
  font-family: "Times New Roman", Times, serif;
  color: white;
  font-weight: bold;
  z-index: 10;    
}
.scanner-status-message {
  display: inline-block;
  line-height: 30px; 
}   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scanner-status">
  <div id="scanner-status-error">
    <div class="scanner-status-message">Stop!</div>
  </div>
  <div id="scanner-status-ready">
    <div class="scanner-status-message">Ready to Scan</div>    
  </div>
</div>

Question / Problem:  I'm using JQuery to do the animation and my text is centered in the top div.  The problem I'm running into is that as my div moves to the left of the screen, the div isn't shrinking in size, but just moving to the left, thus the centered text is no longer seen.  How do I adjust for the moving div but at the same time ensure that my text is "centered"?

A:

You were animating the left property instead of the width property. 

var counter = 0;         
  window.onkeyup = function(e) {
    var key = e.keyCode ? e.keyCode : e.which;
    if (key == 32) {
      if (counter == 0) {
        slide();
      }
    }   
  }   
  function slide() {
    var $lefty = $('#scanner-status-error');
    var $percentage = $lefty.outerWidth() -     ($lefty.outerWidth() * .15);
    $lefty.animate({
      width: "40"  
    });
  }
#scanner-status {
  position: relative;    
}
#scanner-status img {
   display: inline-block;
   max-width: 15px;
   margin-right: 3px;
}
#scanner-status-ready {
   top: 0;
   left: 0;
   width: 100%; 
   position: absolute;     
   vertical-align: middle;
   text-align: center;  
   background-color: #939598;
   max-height: 28px;   
   font-family: "Times New Roman", Times, serif;
   font-weight: bold; 
}
#scanner-status-error {
  top: 0;
  left: 0;
  width: 100%;
  position: absolute;    
  vertical-align: middle;
  text-align: center;  
  background-color: #e54a5c;
  max-height: 28px;   
  font-family: "Times New Roman", Times, serif;
  color: white;
  font-weight: bold;
  z-index: 10;    
}
.scanner-status-message {
  display: inline-block;
  line-height: 30px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scanner-status">
  <div id="scanner-status-error">
    <div class="scanner-status-message">Stop!</div>
  </div>
  <div id="scanner-status-ready">
    <div class="scanner-status-message">Ready to Scan</div>    
  </div>
</div>

