jquery kontinuierliche Animation auf mouseover

Question

Ich versuche, eine Animation nur ausführen, wenn die Maus über ein Objekt ist. Ich kann eine Iteration der Animation erhalten und sie dann wieder auf Normal setzen, wenn die Maus aus ist. Aber ich möchte, dass die Animation beim Mouseover läuft. Wie würde ich das mit setInterval machen? Ich bin ein bisschen fest.

Answer 1

Es könnte wie folgt geschehen:

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

Jetzt können Sie dies tun:

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

Wenn Sie die Animation sofort Anschlag wollten, könnten Sie die hoverOut Linie ändern zu lesen :

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

Answer 2

setInterval gibt eine ID zurück, die an clearInterval übergeben werden kann, um den Timer zu deaktivieren.

Sie können schreiben, die folgenden:

var timerId; 

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

Answer 3

Bedenken Sie:

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

mit:

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

und:

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

Sie können dies auch mit Timern erreichen.

Answer 4

Ich brauchte diese für mehr als ein Objekt auf der Seite zu arbeiten, so dass ich ein wenig Cletus Code geändert:

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