CODEWITHSUNDEEP
javascriptjqueryhtmlanimationonmouseover
James Furious
James Furious

Reputation: 49

Animation Javascript OnMouseOver

var positioner = 0;
var ames = setInterval(animate, 200);

function animate() {
    if(positioner <= 1000){
        document.getElementsByTagName('img')[0].style.backgroundPosition='-'+positioner+'px';
        positioner += 256;
    } else {
        document.getElementsByTagName('img')[0].style.backgroundPosition='-'+positioner+'px';
        positioner = 0;
    }
}
img { 
    background-image: url('https://cdn-images-1.medium.com/max/1600/1*WhDjw8GiV5o0flBXM4LXEw.png');
    background-repeat: no-repeat;
}
<img width="256px" height="256px" onmouseover="animate()"/>

That was my code and currently it's moving automatically and i want to make it just moving onMouseOver! In my opinion, if the setInterval can be put inside that animate() function then this problem will be solved but how to put setInterval inside function??

Upvotes: 0

Views: 58

Answers (2)

ChengWei
ChengWei

Reputation: 46

First of all, animate() is an Element built-in function. If you hover your mouse, you will get some error message in your console.

Mauricio Sipmann's answer works, but he didn't answer your question, 'In my opinion, if the setInterval can be put inside that animate() function then this problem will be solved but how to put setInterval inside function??'.

That's why I give another solution. And my answer is Yes. But Let's rename the animate() to myAnimate() first.

  1. change <img width="256px" height="256px" onmouseover="animate()"/> to <img width="256px" height="256px" onmouseover="myAnimate()"/>

  2. move setInterval() into myAnimate(), but left variable declaration outside.i.e.

var positioner = 0;
var ames;

function myAnimate() {
    if (!ames) {
        ames = setInterval(myAnimate, 200);
    }
    if (positioner <= 1000) {
        document.getElementsByTagName('img')[0].style.backgroundPosition = '-' + positioner + 'px';
        positioner += 256;
    } else {
        document.getElementsByTagName('img')[0].style.backgroundPosition = '-' + positioner + 'px';
        positioner = 0;
    }
}

I hope this can help you.

Upvotes: 0

Mauricio Sipmann
Mauricio Sipmann

Reputation: 475

Here you go, the best way is to handle the mouseOver and mouseOut as listeners and store the setInterval in a variable so you can clear it latter.

var positioner = 0;
var ames;
var img = document.getElementsByTagName('img');

img[0].addEventListener('mouseover', () => {
    ames = setInterval(animate, 200);
});

img[0].addEventListener('mouseout', () => {
    if (ames)
        window.clearInterval(ames);
});

function animate() {
    if (positioner <= 1000) {
        img[0].style.backgroundPosition='-'+positioner+'px';
        positioner += 256;
    } else {
        img[0].style.backgroundPosition='-'+positioner+'px';
        positioner=0;
    }
}
img { 
    background-image: url('https://cdn-images-1.medium.com/max/1600/1*WhDjw8GiV5o0flBXM4LXEw.png');
    background-repeat: no-repeat;
}
<img width="256px" height="256px"/>

Upvotes: 2

Related Questions