Форум

SharpeR · #1 (**permalink**) 06.12.2017, 18:39

Есть вот это - <div id="case" style="background-position: -975px 0px;"></div>
Надо свойство background-position плавно менять на 0px.
Т.е. чтобы получилось так - <div id="case" style="background-position: 0px 0px;"></div>
Но не рывком, а плавно (-975, -974, -973 ... -2, -1, 0).
Я с JS совсем не дружу. Прошу помощи профессионалов)

Lion777 · #2 (**permalink**) 06.12.2017, 19:15

тип так

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div id="case"></div>
  <script>
    var idCase = document.getElementById('case');
    var i = -975;
    function smoothCh() {
      if (i == 0) clearTimeout(timer);
      else {
        idCase.style.backgroundPosition = i++ + 'px 0px';
        var timer = setTimeout(smoothCh, 20);
      }
    }
    smoothCh();
  </script>
</body>


</html>

SharpeR · #3 (**permalink**) 06.12.2017, 19:24

Супер. То что нужно. Спасибо!

Но почему скрипт не работает с шапки?

Lion777 · #4 (**permalink**) 07.12.2017, 13:54

так пробуй

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    var i = -975;
    function smoothCh() {
      var idCase = document.getElementById('case');
      if (i == 0) clearTimeout(timer);
      else {
        idCase.style.backgroundPosition = ++i + 'px 0px';
        var timer = setTimeout(smoothCh, 20);
      }
    }
    document.addEventListener('DOMContentLoaded', smoothCh)   
  </script>
</head>

<body>
  <div id="case"></div>
</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript