Question

I’ve got a slideshow that animates opacity of an image and then moves it up one z-index. This makes a nice blending loop of a slideshow.

But, I want something else on the page to appear only when one of the slides is visible. Is it possible to track the visibility or z-index of one of the slides so that, when it’s either at an opacity of 1 or z-index of say, 8 for example, to trigger another div to show (or animate to show)?

I’m thinking something like:

$(function(){
    var firstslide = $('.first_slide').css("opacity");
    if (firstslide == 1){
    $('#showme').show();
    }
    else (){
    $('#showme').hide();
});

But this doesn’t keep track of the slide or it’s event (when it’s opacity is set to 1).

How do I track that one slide to know when it’s opacity is 1 and have it fire my show/hide of the other element?

Answer 1

The easiest way is to add callback to the slideshow function to trigger your function.
Otherwise you can only do it my setting setInterval() on your function to check it periodically because there’s no such event as change of element’s attribute.