SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery toggle plus/minus image and animate photo

    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. #2
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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);
    });

    });


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •