I have an image slider plugin in my Joomla website, and I want to make the opacity of each slider image gradually increase after initial display. To do this, I have a jQuery function I'd like to call whenever a particular CSS transition occurs: div's z-index value. As each slide becomes the featured one, its container div's z-index goes from 10 to 20.
Here's my jQuery function so far:
That function fades all slider images one time only, on page load. I'd like to instead call the function whenever the "z-index" property of <div class="sp-slide"> changes to a value of 20 (from 10).
How can my function be written so it's called whenever the z-index of <div class="sp-slide"> changes to 20? (Assuming this is even doable.)