jquery selector

Question

I am having trouble getting my selector right here. What this function is suppose to do is

1. Select the image and shift the opacity on hover
2. Select the anchor tag an slideUp on hover

If you can help me get the anchor tag selected specific to the particular image that is being hovered over that would be great. I've tried many different ways but I'm not that great with syntax. Thanks!

$(document).ready(function() {
        $('.workitem_photo > img').each(function() {
            $(this).hover(function() {
                $(this).stop().animate({ opacity: 0.8 }, 500);
                $(this > '.workitem_projectdetails').show('500')
            },
           function() {
               $(this).stop().animate({ opacity: 1.0 }, 500);
               $(this > '.workitem_projectdetails').hide('500')
           });

        });
    });

Here is the html:

<div class="workitem branding">
   <div class="workitem_photo"><img src="<?php echo home_url( '/wp-content/themes/po/' ); ?>images/workitem/branding-1000ikc.gif" alt="1000 Islands Kayaking" /></div>
   <div class="workitem_title">1000 Islands Kayaking Identity</div>
   <div class="workitem_description">Brand development for a Kayak tour operator.</div>
   <a class="workitem_projectdetails" href="#" style="display:none;">View Project Details</a>
</div>

Here is a working version my test site

Answer 1

When you're in the hover function $(this) refers to the img, not the div. Try this:

$(document).ready(function() {
    $('.workitem_photo > img').each(function() {
        $(this).hover(function() {
            $(this).stop().animate({ opacity: 0.8 }, 500);
            $(this).parent().parent().find('.workitem_projectdetails').show('500')
        },
       function() {
           $(this).stop().animate({ opacity: 1.0 }, 500);
           $(this).parent().parent().find('.workitem_projectdetails').hide('500')
       });

    });
});

Here's the jsfiddle.

Answer 2

I'd use something like this...

$(document).ready(function() {
    $('.workitem').each(function() {
        var projectDetails = $(this).find('> .workitem_projectdetails');

        $(this).find('.workitem_photo > img').hover(function() {
            $(this).fadeTo(500, .8);
            projectDetails.show('500');
        }, function() {
            $(this).fadeTo(500, 1);
            projectDetails.hide('500');
        });
    });
});

jsFiddle.