Анимация Javascript OnMouseOver

Question

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()"/>

Это был мой код, и в настоящее время он движется автоматически, и я хочу, чтобы он просто двигался onMouseOver!По моему мнению, если setInterval можно поместить внутри этой animate() функции, то эта проблема будет решена, но как поместить setInterval в функцию ??

Answer 1

Прежде всего, animate () - это встроенная функция Element.Если вы наведите курсор мыши, вы получите сообщение об ошибке в консоли.

Ответ Маурисио Сипмана работает, но он не ответил на ваш вопрос: «По моему мнению, можно ли поместить setInterval в эту анимацию?(), тогда эта проблема будет решена, но как поместить setInterval внутри функции ?? '.

Вот почему я даю другое решение.И мой ответ - да.Но давайте сначала переименуем animate () в myAnimate ().

1. изменим <img width="256px" height="256px" onmouseover="animate()"/> на <img width="256px" height="256px" onmouseover="myAnimate()"/>

2. переместим setInterval () вmyAnimate (), но объявление переменной осталось за пределами .ie

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;
    }
}

Надеюсь, это поможет вам.

Answer 2

Итак, лучший способ - обработать mouseOver и mouseOut как слушателей и сохранить setInterval в переменной, чтобы вы могли очистить ее позже.

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"/>