jquery optimising hover event with div and an image

Question

code:

    $('.featured').hover(
    function() {
        $(this).addClass('active');
        $('img',this).fadeTo('slow', 0.5, function() {})
    },
    function() {
        $(this).removeClass('active');
        $('img',this).fadeTo('slow', 1, function() {})
    });

how can I improve this?

I recall someone telling me once not to use

$('img', this) ..

but I can't figure out how to access an image within the DIV being hovered over any other way.

thanks !

Answer 1

You can use .find(), like this:

$('.featured').hover(unction() {
    $(this).addClass('active').find('img').fadeTo('slow', 0.5);
}, function() {
    $(this).removeClass('active').find('img').fadeTo('slow', 1);
});

This finds any <img> elements within the element you're hovering...skipping several steps $(selector, context) has to take to figure out it's really a $(context).find(selector) call. Also there's no need for the animation callbacks...they're optional so just leave them off if you're doing anything in them.