Ciągła animacja jQuery na mouseover

Question

Próbuję uruchomić animację tylko wtedy, gdy mysz znajduje się nad obiektem. Mogę uzyskać jedną iterację animacji, a następnie ustawić ją ponownie na normalną po wyjęciu myszy. Ale chciałbym, żeby animacja zapętlała się po najechaniu myszą. Jak to zrobić, używając setInterval? Trochę utknąłem.

Answer 1

można to zrobić tak:

$.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 
} 

Teraz można to zrobić:

$("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 
}); 

Jeśli chciałeś animacji natychmiast przystanek, można zmienić linię hoverOut czytać :

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

Answer 2

setInterval zwraca identyfikator, który można przekazać do clearInterval, aby wyłączyć timer.

można napisać następujące:

var timerId; 

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

Answer 3

Rozważmy:

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

z:

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

oraz:

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

Można to osiągnąć również za pomocą timerów.

Answer 4

Musiałem to do pracy dla więcej niż jednego obiektu na stronie, więc trochę zmodyfikowana Cletus za kod:

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