Javascript-форум - Двигающаяся .gif помогите

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Двигающаяся .gif помогите (https://javascript.ru/forum/misc/53141-dvigayushhayasya-gif-pomogite.html)

Двигающаяся .gif помогите

Нужно заставить двигаться .gif изображение с левого края экрана к правому по кнопке start и stop, что бы остановить. Также двигаться быстрее по кнопке быстрее. И в обратном порядке с правой стороны экрана к левой. Не стоит обращать внимание на гифку... она двигается сама по себе, как будто это просто картинка, объект. двигать нужно его.. Помогите пожалуйста

staseward, со скоростью не логично будет, так как скорость гифки одна и та же.

не стоит обращать внимание на гифку... она двигается сама по себе, на это не обращаем внимание, как будто это просто картинка, объект. двигать нужно его..

http://learn.javascript.ru/play/Gz53qc

<!DOCTYPE HTML>
<html>
    <head>
      <style type="text/css">
        .cat {
            background: url('http://javascript.ru/forum/attachments/misc/2547d1421926832t-dvigayushhayasya-gif-pomogite-cat-walk-gif');
            bottom: 0;
            left: 0;
            height: 100px;
            position: fixed;
            width: 100px;
        }
      </style>
    </head>
  <body>
    
    <div class="cat"></div>
    <div>Speed: <input id="cat-speed" type="text" value="1"></div>
    <input onclick="startCat()" type="button" value="start">
    <input onclick="stopCat()" type="button" value="stop">

    <script>
      var cat = document.querySelector('.cat'),
          catSpeedElem = document.getElementById('cat-speed'),
          catIsAnimated, catIntervalID,
          catWidth = cat.clientWidth,
          displayWidth = window.innerWidth;
      
      function startCat() {
        if(catIntervalID) stopCat();
        var speed = (+catSpeedElem.value || 1) / 10,
          	selfStyle = cat.style,
            x = 0;
        catIntervalID = setInterval(function() {
          	x += speed;
          	selfStyle.left = x + 'px';
          	if(x >= displayWidth - catWidth) stopCat();
        }, 5);
        
      };
      
      function stopCat() {
        clearInterval(catIntervalID);
        catIntervalID = null;
      };




    </script>

  </body>
</html>

спасибо, все работает, ток есть 2 проблемы, сама гифка теперь не двигаеться и когда запускаю через браузер chrome, гиффка ниже экрана находиться(ее не видно)... как это исправить?

staseward, ширину и высоту в стилях поменял?