CODEWITHSUNDEEP
javascript
Zii
Zii

Reputation: 73

Moving an image Javascript

My JS page

const catImage=document.querySelector('img')

let catImageLeft=catImage.style.left='0px'

function catwalk() {

    let position= 0
    setInterval(frame,50)

    function frame() {

        position+=10
        catImage.style.left=position+'px'

        if (position==1080) {
            return catwalk()
        } 
    if (position==540) {
            setTimeout(catImage.src='https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif',1000)
        }
    }

}

As you can see, it keeps on moving after replacing the image. And also if i would like the image to start over again, it stutters.

any suggestions.

Upvotes: 0

Views: 81

Answers (1)

AiAbdrahim
AiAbdrahim

Reputation: 309

Try this!

const catImage = document.querySelector('img');
const catWalkimg = 'https://i.imgur.com/Akh489w.gif';
const catDancImg = 'https://media2.giphy.com/media/3mXcJgVhPxWZa/giphy.gif';

catwalk();

function catwalk() {
  let position = 0;
  setInterval(function() {

    position = position > 700 ? 0 : position;

    if (position == 350) {
      if (catImage.src != catDancImg) {
        catImage.src = catDancImg;
        setTimeout(() => {
          catImage.src = catWalkimg;
          position += 10;
        }, 2000);

      }

    } else {
      catImage.style.left = position + 'px';
      position += 10;
    }
  }, 50);
}
img {width: 160px}
<img style="position:absolute;" src="https://i.imgur.com/Akh489w.gif" />

Upvotes: 2

Related Questions