jQueryを利用するときは「いつ実行するか」を指定する必要があります。
基本中の基本である「読み込んだら実行」をマスターしましょう。
$(function(){
//実行内容
})
これだけです。
忘れると動かなかったりします。
$(document).ready(function() {
//実行内容
});
$(window).load(function() {
// 実行内容
});
こんな書き方もありますが、大体同じ動作をするので最初のものを使っておくといいでしょう。