Detect when opacity changes

Question

Is there a way in jquery or javascript to detect when then opacity of an element changes then launch a function to add new effects like for example if you had a page where automatic things happen like an element faded in then you wanted to launch something else when that happened. How would you do this???

It is kind of like a slide show.

Here is a demo of what I have so far:

http://jsfiddle.net/Hive7/n57Zy/

Than I want when the last elements opacity changes then start the loop again

Thanks in advance

Answer 1

An example of what i'm talking about, gives you the idea.

var delayOL = d;
var fadeLoop = (function fadeLoop(i) {
    $('.slideshow img').eq(i).delay(delayOL).fadeOut(d, function () {
        i++;
        if (i === $('.slideshow').find('img').length) i = 0;
        $('.slideshow img').eq(i).fadeIn(d, function () {
            delayOL = 0;
            setTimeout(function () {
                fadeLoop(i)
            }, g);
        });
    });
})(0);

DEMO

Answer 2

This is an example, how to detect change selector value in CSS using javascript.

I have solution inspired by http://darcyclarke.me/dev/watch/ using jquery.watch.js

jQuery(function($){
    $("div").watch('opacity', function(){
        alert("OMG!");
    });
});

JSFiddle: http://jsfiddle.net/KWqUv/1/