JS - efekt przejścia

Chciałem napisać skrypt, który powodował by ładne przejście na nową stronę po kliknięciu linku, czyli po prostu kilkukrotne zwiększanie opacity aż do 1 z jakimś opóźnieniem po każdej zmianie. Udało mi się to zrobić, ale nie jest to raczej najlepszy kod, zmienne globalne, etc:

var i = 10;
function display() 
{
	i = i + 1;
	document.getElementById("content").style.opacity = i/100;
	setTimeout("display()", 13);	
}

Wg. mnie najlepszym rozwiązaniem byłoby napisanie jednej funkcji się tym zajmującej i w niej zagnieździć funkcję, która by się kilka razy wykonywała. Lepiej wygląda, niestety nie działa (doTimer() is not defined w setTimeoucie):

function display() 
{
	var i = 10;
	function doTimer()
	{
		i = i + 1;
		document.getElementById("content").style.opacity = i/100;
		setTimeout("doTimer()", 13);	
	};
	doTimer();
}

Mam właściwie kilka pytań:

1. Czy dobrze robię że w jednym pliku .js piszę wszystko co jest mi potrzebne? Pisać do wszystkiego oddzielne funkcje, czy jakoś to grupować literałami obiektowymi, czy jeszcze jakoś inaczej?
2. Dlaczego drugie rozwiązanie nie działa? I czy na pewno jest lepsze od 1?

Chcesz uzyskać efekt, czy nauczyć się czegoś? Jeżeli chodzi o efekt, to fadeIn i fadeOut w jQuery załatwi sprawę.

literały obiektowe - raczej dobra rzecz. na pewno uporządkuje kod, nie będzie też problemów z tym, że napiszesz sobie funkcję display(), potem stwierdzisz, że trzeba Ci dołączyć jakąś bibliotekę, a tam też funkcja display(). pomoże Ci też logiczniej pogrupować funkcje i zmienne, obędziesz się bez globalek.

oducz się podawania stringa jako pierwszego parametru setInterval/setTimeout - funkcja anonimowa, albo po prostu nazwa funkcji.

Ok, dzięki za rady i sugestie :D

:)* żeby ten wyświetlony emotikon wyżej nie mylił, wybaczcie podwójny post - nie mogę edytować.