JQuery наведите курсор, который меняет различные фоны с бесконечным циклом, пока мышь отсутствует

Question

У меня есть <div> с фоновым изображением, которое изменит фон 4 раза с задержкой 300 мс. Я пытался с setTimeout, который, кажется, работает правильно, но clearTimeout (t); когда мышь выходит из строя, происходит сбой, потому что фон продолжает меняться.

$(document).ready(function() {
    $(".image").hover(function(){
        var obj = $('.image');
        $(this).css("background-position", "0 -90");
        var t=setTimeout(function(){obj.css("background-position", "0 -180")}, 300);
        var t=setTimeout(function(){obj.css("background-position", "0 -270")}, 600);
        var t=setTimeout(function(){obj.css("background-position", "0 -360")}, 900);
    }, function() {
        $(this).css("background-position", "0 0");
        clearTimeout(t);
    });
});

Я бы тоже хотел добавить в функцию наведения способ создания бесконечного цикла, пока мышь не будет отпущена.

Извините за мой школьный английский.

Заранее спасибо!

Answer 1

переместить t var dec за пределы функции. тогда это будет в закрытии.

например, что-то вроде этого:

$(document).ready(function() {
    var t1,t2,t3;

    $(".image").hover(function(){
        var obj = $('.image');
        $(this).css("background-position", "0 -90");
        var t1=setTimeout(function(){obj.css("background-position", "0 -180")}, 300);
        var t2=setTimeout(function(){obj.css("background-position", "0 -270")}, 600);
        var t3=setTimeout(function(){obj.css("background-position", "0 -360")}, 900);
    }, function() {
        $(this).css("background-position", "0 0");
        clearTimeout(t1);
        clearTimeout(t2);
        clearTimeout(t3);
    });
});

Есть другие проблемы с этим кодом, но я просто отвечаю на вопрос.

Answer 2

Поскольку при этом переменная t дважды перезаписывается двумя предыдущими setTimeout с, поэтому сохраняется только код последнего setTimeout, поэтому при вызове clearTimeout вы очищаете только последнийsetTimeout.

То, что вы можете сделать, это использовать три разные переменные, чтобы сохранить это, изменить вместо этого setInterval или использовать цикл для установки тайм-аутов.

Answer 3

Вы пробовали анимацию jquery ?Возможно, это сильно упростит вещи - они разберутся со всеми таймерами и прочим для вас.Она встроена в библиотеку, которую вы уже используете, так почему бы не воспользоваться ею?

$('.image').mouseover(function(){
    $(this).stop().animate(
        {backgroundPosition:"(0 -360px)"}, 
        {duration:1800})
    })
.mouseout(function(){
    $(this).stop().animate(
        {backgroundPosition:"(0 0)"}, 
        {duration:100})
    });

По умолчанию в ней будет использоваться линиарная анимация, но вы можете настроить другую easing если ты хотел чего-то другого.