jQuery непрерывная анимация на mouseover

Question

Я пытаюсь запустить анимацию только тогда, когда мышь над объектом. Я могу получить одну итерацию анимации, а затем вернуть ее к нормальной работе. Но я хотел бы, чтобы анимация зациклилась на мыши. Как мне это сделать, используя setInterval? Я немного застрял.

Answer 1

Это может быть сделано, как это:

$.fn.loopingAnimation = function(props, dur, eas) 
{ 
    if (this.data('loop') == true) 
    { 
     this.animate(props, dur, eas, function() { 
      if($(this).data('loop') == true) $(this).loopingAnimation(props, dur, eas); 
     }); 
    } 

    return this; // Don't break the chain 
} 

Теперь вы можете сделать это:

$("div.animate").hover(function(){ 
    $(this).data('loop', true).stop().loopingAnimation({ left: "+10px"}, 300); 
}, function(){ 
    $(this).data('loop', false); 
    // Now our animation will stop after fully completing its last cycle 
}); 

Если вы хотите анимации сразу остановки, вы можете изменить hoverOut линии для чтения :

$(this).data('loop', false).stop(); 

Answer 2

setInterval возвращает идентификатор, который можно передать в clearInterval, чтобы отключить таймер.

Вы можете написать следующее:

var timerId; 

$(something).hover(
    function() { 
     timerId = setInterval(function() { ... }, 100); 
    }, 
    function() { clearInterval(timerId); } 
); 

Answer 3

Рассмотрим:

<div id="anim">This is a test</div> 

с:

#anim { padding: 15px; background: yellow; } 

и:

var over = false; 
$(function() { 
    $("#anim").hover(function() { 
    over = true; 
    grow_anim(); 
    }, function() { 
    over = false; 
    }); 
}); 

function grow_anim() { 
    if (over) { 
    $("#anim").animate({paddingLeft: "100px"}, 1000, shrink_anim); 
    } 
} 

function shrink_anim() { 
    $("#anim").animate({paddingLeft: "15px"}, 1000, grow_anim); 
} 

Вы можете добиться этого, используя таймеры.

Answer 4

Я нуждался в этом, чтобы работать более одного объекта на странице, так что я изменил немного кода Клетуса в:

var over = false; 
$(function() { 
    $("#hovered-item").hover(function() { 
    $(this).css("position", "relative"); 
    over = true; 
    swinger = this; 
    grow_anim(); 
    }, function() { 
    over = false; 
    }); 
}); 

function grow_anim() { 
    if (over) { 
    $(swinger).animate({left: "5px"}, 200, 'linear', shrink_anim); 
    } 
} 

function shrink_anim() { 
    $(swinger).animate({left: "0"}, 200, 'linear', grow_anim); 
}