animacion infinita, romperla y volver la colocar

[geranjian]

function efectos(){
inicio=$('img');
inicio.animate({width:150,height:150},100);
inicio.animate({width:200,height:200},300);
inicio.animate({width:100,height:100},900,efectos) ;
}
efectos();
----------------------------------------------------------------------------------------------------------------------------------------
imagen=$('img');
inicio=setInterval;
imagen.on(inicio(function(){
imagen.animate({width:150,height:150},100);
imagen.animate({width:200,height:200},300);
imagen.animate({width:100,height:100},900);
}));
miren tengo estos dos codigos para dar una animación infinita, pero ahora quiero con la funcion hover o mouseenter, o cuando de click, romper esa animacion inifinita y colocar otra animación, y cuando quite el mouse de mi elemento o le de click retorne a la animacion infinita. de antemano gracias si lo resuleven ;) o si me dan otro ejemplo respecto a lo que busco tambn me sirve sobre animacion infinita, romper, y volver a colocar :)

[alberto510a]

Hola.

Probaste a usar el método stop() tengo entendido que con él se pueden finalizar las animaciones.

Mira aquí tienes buenos ejemplos para solucionarlo

http://api.jquery.com/stop/

[geranjian]

lo deje asi y funciono :D

$(document).ready(function() {
function efectos(){
inicio=$('#corazon');
inicio.animate({width:150,height:150},100);
inicio.animate({width:200,height:200},300);
inicio.animate({width:100,height:100},900,efectos) ;
}
efectos();


/*bien aqui hice que se deteniera con stop y con retunr renornaba otra vez la animacion*/

$('#corazon').mouseenter(function(){

inicio.stop(true );
function efectos1(){
ini=$('#corazon');
ini.animate({width:400,height:400},300);
ini.animate({width:350,height:350},500);
ini.animate({width:300,height:300},600,efectos1);
}
efectos1();
});
$('#corazon').mouseleave(function(){
ini.stop(true);
return(efectos());
});

[alberto510a]

Me alegro.
Saludos.