时间戳

首页 > 解决方案 > 使用 jQuery setInterval 减少元素的宽度，但仅从一侧（左侧或右侧）

javascript - 使用 jQuery setInterval 减少元素的宽度，但仅从一侧（左侧或右侧）

问题描述

这是我减少所选元素宽度的代码（class =“life_bar”），但正如我所附的图片所示，我希望它从左侧或右侧减少其宽度（让我们以左侧为例），但它总是从双方，我该怎么办？ 这是jQuery代码在此处输入图像描述 在此处输入图像描述

$(function () {
    var timmer;
    gocount();
    function gocount(){
        timmer = setInterval(function () {
         var life_bar_width = $(".life_bar").width();
            life_bar_width -= 100;
            $(".life_bar").css( {width: life_bar_width,
                left: '-50px'})
        },1000);
    }
});

这是CSS代码

.life_bar{
    width: 500px;
    height: 10px;
    background: crimson;
    margin: 100px auto;
}

这是html代码

<body>
<div class="life_bar"></div>
</body>

标签： javascriptjquerydom

解决方案

在每个间隔滴答声中对 X 使用转换负数：

$(function () {
  var timmer;
  gocount();
  let counter = 1
  function gocount(){
    timmer = setInterval(function () {
     var life_bar_width = $(".life_bar").width();
      life_bar_width -= 100;
      $(".life_bar").css({
        width: life_bar_width,
        left: '-50px',
        transform: `translate(${-50*counter}px)`
      })
      counter++
    },1000);
  }
});
.life_bar{
    width: 500px;
    height: 10px;
    background: crimson;
    margin: 100px auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="life_bar"></div>

推荐阅读