使用居中文本幻灯片div的动画

Question

我的Web应用程序具有条形码扫描的监听器。我是如何工作的另一个故事。

无论如何，我需要能够在检测到扫描时以及摄取该扫描的后端处理成功时提醒用户。

为了帮助我，我采取了2个div并覆盖它们。底部div有一些文字说“准备扫描”，顶部div有一些文字描述了最后一次扫描的状态。基本上，这将起作用的方式，用户将“扫描”某些东西，然后div将显示100％的宽度，一些消息显示“OK”或“Stop！”或“做某事......”取决于一些业务逻辑。但大约2-3秒后，我希望div向左滑动，露出底部div，表示“准备扫描”。这样，用户可以继续扫描，并且他们知道他们的上一次扫描是“被接受的”。

这是代码。让div滑动 - 击中空格键：

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>

问题/问题：我正在使用JQuery来制作动画，而我的文字在顶部div中居中。我遇到的问题是，当我的div移动到屏幕左侧时，div的大小不会缩小，而只是向左移动，因此不再看到居中的文本。如何调整移动div但同时确保我的文本“居中”？

Answer 1

你是动画left财产而不是width财产。

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>