Javascript 使用jQuery setInterval可以减少元素的宽度，但只能从一侧（左侧或右侧）开始_Javascript_Jquery_Dom

Javascript 使用jQuery setInterval可以减少元素的宽度，但只能从一侧（左侧或右侧）开始

javascript jquery dom

Javascript 使用jQuery setInterval可以减少元素的宽度，但只能从一侧（左侧或右侧）开始,javascript,jquery,dom,Javascript,Jquery,Dom,下面是我减少所选elementclass=life_条宽度的代码，但正如我随附的图片所示，我希望它从左侧或右侧减少宽度让我们以左侧为例，但它总是从两侧开始，我该怎么办？以下是jQuery代码 $(function () { var timmer; gocount(); function gocount(){ timmer = setInterval(function () { var life_bar_width = $(".life_

下面是我减少所选elementclass=life_条宽度的代码，但正如我随附的图片所示，我希望它从左侧或右侧减少宽度让我们以左侧为例，但它总是从两侧开始，我该怎么办？以下是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>

在每个间隔的X上使用“平移负数”：

$function{ var timmer； gocount；让计数器=1 函数gocount{ timmer=setIntervalfunction{ var life\u bar\u width=$.life\u bar.width；寿命条宽度-=100； $.life\u bar.css{ 宽度：生活条宽度，左：'-50px'， transform:`translate${-50*计数器}px` } 柜台++ },1000; } }; .生活酒吧{ 宽度：500px；高度：10px；背景：深红色；保证金：100像素自动； }

我想你必须把它左右移动，减少像素的数量，或者把它放在一个容器里，这个容器的宽度和这个条的开始时的宽度一样：100px 0；