jquery selector

Question

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

Select the image and shift the opacity on hover
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

score 2 · Answer 1 · answered Jun 22 '11 at 00:28

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.

answered Jun 22 '11 at 00:28

alex

479,566
201
878
984

Very minor, but I think `.children` is more understandable than `find(">`. Not sure if there's any performance difference. – James Montagne Jun 22 '11 at 00:34
@kingjiv Yep, you could easily replace that. Performance is *probably* better with `children()` as it doesn't need to parse the `>`. – alex Jun 22 '11 at 00:51
Interesting: http://stackoverflow.com/questions/3177763/what-is-the-fastest-method-for-selecting-descendant-elements-in-jquery – thirtydot Jun 22 '11 at 01:13

score 0 · Answer 2 · answered Jun 22 '11 at 00:33

0

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.

answered Jun 22 '11 at 00:33

villecoder

13,323
2
33
52

I think there is a problem with the overall structure of the DOM because the intention is to be able to click on anchor tag which should overlay the image with a z-index. I am running into a problem where as soon as you mouse over the anchor tag, it wants to disappear because you are no longer hovering the image. is there a way to set this up so that we can sent the hover function for more then one selector? – patrick Jun 22 '11 at 06:15
scratch that, when I add a double selector, it just doesn't let the other one complete the .show function. http://jsfiddle.net/fjy4J/14/ – patrick Jun 22 '11 at 06:30

jquery selector

2 Answers2