Question

I have this little hover script.

$('iframe').hover(function() {
    $('.caption').fadeIn(800);
},
function() {
    $('.caption').fadeOut(800);
});

When I hover over an iframe it fades in the class ‘caption’. When I exit the hover, it fades it out. Simple enough.

I am using a plugin that adds a class ‘current’ to the current panel that is in view. How can I add to this code so this effect ONLY happens IF the panel has a class ‘current’.

Thanks!

Answer 1

You can use the jQuery is method like so:

$('iframe').hover(function() {
    if ($(this).is('.current')) {
        $('.caption').fadeIn(800);
    }
},
function() {
    if ($(this).is('.current')) {
        $('.caption').fadeOut(800);
    }
});

Or alternatively, if you only wish to target .caption elements that are descendents of .current (if the iframe isn’t the ‘panel’ with the current css class):

$('iframe').hover(function() {
    $('.current').find('.caption').fadeIn(800);
},
function() {
    $('.current').find('.caption').fadeOut(800);
});