Triggering jQuery event when 3 specific elements are visible

Here's to hoping this makes se开发者_运维问答nse.

I'm testing a new version of my personal site at http://joshuacody.net/jc3/

I'm looking to display my works in a bit of an interactive style, using jQuery.

You can see that each image is mis-matched, but it has a rotator. And you can rotate each image to line all three up. When all three are lined up, I would like to fadeIn a div explaining what that project is.

I'm using the plugin to rotate through my images (http://www.malsup.com/jquery/cycle/), if that's any help.

I'm pretty new to jQuery, and I'm just a hair stuck on how to do this theoretically. Any ideas?

I went to your site before reading your question and as much as I enjoy playing with the spin feature to line up images, as an interface to actually go somewhere it's non-obvious without reading your explanation.

You'll need to use events or callbacks as described in the demo. The after: parameter is all you really need. I would first fill in your alt attributes with descriptions that are identical for all the slot images that match. Then the after function would look something like:

$('#slot_1').cycle({
    fx: 'scrollVert',
    next: '.scroll_up_1',
    prev: '.scroll_down_1',
    after: onAfter,
    timeout: 0
}); // Duplicate the after param on all 3 slots.
function onAfter(){
    var alt =  $('#slot_1 img:visible').attr('alt');
    if (alt == $('#slot_2 img:visible').attr('alt') &&
        alt == $('#slot_3 img:visible').attr('alt') ) {
        switch (alt) {
        case 'Critical Reason?':
            $('#linkToWork1').click(); //a hidden link?
        break;
        case 'CFCC Labs':
            document.location = 'http://url/to/work/2';
        break;
        case 'Tailgate':
            $('#formActionWork3').submit();
        break;
        default:
        //oops.
        }
    }
}

Note that I put in three ways to actually change the page, you'll probably want to pick your favorite.