jquery working in jsfiddle, but not on site

jquery working in jsfiddle, but not on site

I know people have submitted similar questions, but I've been through the
answers as well and not seen a solution that works. I wrote a script that
sorts my list of portfolio items in jsfiddle. It looks something like
this:
$( ".music-button" ).click(function() {
$('.project-thumb-inside').not('.music').addClass('hidden').removeClass('visible');
$('.music').addClass('visible').removeClass('hidden');
});
On jsfiddle, the script works, but when I plug it into my site's footer,
it does not do a thing. Would anyone know why? jquery is loaded on my
site, and both
I've put everything (stylesheet and all) into jsfiddle, and my site works:
http://jsfiddle.net/LbgPF/2/
But when I go to my actual website, my script does not work:
http://www.rileydra.com/00_dra/work/branding-and-identity/
I've spent quite a bit of time on this but still think the solution is
something simple that I'm overlooking.