jquery selector
<p>I am having trouble getting my selector right here. What this function is suppose to do is</p>

<ol>
<li>Select the image and shift the opacity on hover</li>
<li>Select the anchor tag an slideUp on hover</li>
</ol>

<p>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!</p>

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

        });
    });
</code></pre>

<p>Here is the html:</p>

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

<p>Here is a working version <a href="http://www.patrickorr.ca" rel="nofollow">my test site</a></p>
