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 !

Sukhdeep Singh Handa · Accepted Answer · 2012-09-12 12:26:41Z

2

You can use .find(), like this:

$('.featured').hover(function(event) {
    $(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.

edited Sep 12, 2012 at 12:26

Sukhdeep Singh Handa

4133 silver badges13 bronze badges

answered Sep 23, 2010 at 14:59

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jquery optimising hover event with div and an image

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related