ayuda con animacion infinita!!!! terminarla y volver a empesarla

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

tan fácil como esconder el div donde se este ejecutando la animación:

por ejemplo si tu quieres que cuando el cursor este encima de tu animación infinita esconde el div contenedor:


$("#animacion_infinita").hover(function(){
$(this).hide;
$("#animacion_hover").show();
},
function () {
$(this).show();
$("#animacion_hover").hide();
}
);