Executar função de forma prioritária

[RMCosta]

Boas, tenho um problema que deve ser fácil de resolver para o pessoal mais experiente em javascript/jquery.

Como é que eu faço para que, só depois do conteúdo da função hideAnimation ser concluído, seja executado o código seleccionado ? Já tentei com a manipulação da "queue" e verificando se há animações em curso mas não me estou a safar ...

$('#social-items').mouseleave(
	function(){
		hideAnimation($('#activation-button'),$('#social-items'));	
		$('#activation-button').one('click',
			function(){
				showAnimation($('#activation-button'),$('#social-items'));
			});
	});

function hideAnimation(button,pannel){

pannel.stop().animate({"left" : "-80px"},800, 
	function(){
		button.animate({"left" : "0px"},800);
	 });
}

N: Já agora, pode ser que me saibam responder a outra dúvida ... Este código é para animar uma barra lateral com alguns ícones; se eu estiver no fundo da página (fazendo scroll down) e activar o botão que desencadeia a animação, a página web "salta" para o topo, de modo a que a animação da barra posssa ser completamente visualizada. Como é que eu posso impedir isto de acontecer ?

[RMCosta]

Consegui descobrir a solução para o 2º problema com um "return false;" dentro do event handler.

Mas ainda não consegui encontrar solução para o primeiro ...  Estou a tentar resolver através de variáveis de estado  , mas se alguém souber uma forma mais simples de determinar o final da função hide()  , digam qualquer coisa.

[simonoop]

Solução rápida:

Passa o código a amarelo numa função anónima como 3º parâmetro da função hideAnimation e passa-o depois como callback do button.animate.

Qualquer coisa como o seguinte:

<script>
    $(function(){
        $("#d1").mouseover(function(){
            foo('a','b',function(){alert('c');});
        });
        function foo(a,b,c){
            $("#d2").animate({"left" : "0px"},800, c);
        }

    });
</script>

<div id="d1">asasa</div>
<div id="d2">xxxxx</div>