Wie richtig jquery script einbinden?

Hallo!

Leider ist es nirgendwo in Schritten erklärt. Ich habe versucht ein animiertes Menü zu erstellen. Ich bin wie folgt vorgegangen:

1. Neues Theme-Ordner mit dazu gehörenden Dateien (page.tpl.php, theme.info, style.css) erstellt.
2. html Code für das Menü in page.tpl.php eingefügt.
3. Im selben Ordner eine Datei mit der Endung ".js" angelegt, und dort das Script, was aus einem funktionierenden Beispiel stammt, eingefügt. Dem html und jquery Code entsprechend style.css editiert.
4. In theme.info Datei scripts[]=jqr.js entsprechend dem Namen der jquery-Datei eingefügt. Nachdem sich herausgestellt hat, dass es nicht funktioniert, in page.tpl.php <?php drupal_add_js( 'jqr.js');?> eingefügt.
5. Jedes Mal Cache geleert und die Seite neu geladen.

Ergebnis:
Das Menü wird angezeigt, aber das jquery Teil funktioniert nicht.

Was mache ich falsch?

Hier das Beispiel, was ich nachzubilden versuche:
http://anton.shevchuk.name/wp-demo/jquery-tutorials/animated-hover1.html