используйте jQuery setInterval для уменьшения ширины элемента, но только с одной стороны (слева или справа) - PullRequest
Новая
       1

используйте jQuery setInterval для уменьшения ширины элемента, но только с одной стороны (слева или справа)

0 голосов
/ 14 января 2020

вот мои коды для уменьшения ширины выбранного элемента (class = "life_bar"), но, как показывают мои прикрепленные изображения, я хочу, чтобы он уменьшил ширину слева или справа (давайте сделаем левый, как пример), но это всегда идет с обеих сторон, что мне делать? enter image description here enter image description here здесь 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>

1 Ответ

1 голос
/ 14 января 2020

с использованием отрицательного перевода на 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...