Jquery toggle plus/minus image and animate photo

JavaScript
1

I’ve been pulling my hair out for two days trying to figure out how to do this but still can’t figure it out. I’m currently reading jQuery from novice to ninja but I’m no where close to a ninja. I have a div containing list items, a photo, and a plus/minus button at the bottom of the div.

The list items are absolutely positioned behind the photo. When I click on the plus button I want it to change to minus and animate the photo 29px from the top revealing the list-items behind it. Then I want to click the minus button changing it back to plus and animating the photo back up to the top.

I’m trying to accomplish something very similar to what you see on Kyanmedia.com. Except their images animate down and up on hover. I want my image to animate down then up on click and toggle the plus/minus image.
I’m new to jQuery so I’m having a real hard time trying to figure this out. Everything I’ve tried doesn’t work. Can someone PLEASE help me!!!

The links to Kyan Media to get an idea of what I’m trying to do.
Web Design Surrey | Kyan
Easy image rollovers – Kyan Blog

2

This is my code that won’t work.

$(document).ready(function() {
$(‘#btn_switch’).click(function () {
$(this).addClass(‘on’)
$(‘.photo’).animate({ top: ‘29px’}, 500);

    } function() {
	$(this).removeClass('on')
    $('.photo').animate({ top: '0px'}, 500);
    });

});