Writing a JQuery/Javascript fading function

Question

I am trying to write one function that will be able to fade in/out images inside multiple divs on a single HTML page. The images in the Divs would need to fade in at the same times from each div. Then fade out followed by the next image in the div. Sort of creating a mini image rotation presentation in each div.

I cannot wrap my head around this :) I can easily make this happen without a function on a page, however, I want something that I can easily repeat with as many div's on the page as I desire. Can someone please educate me :) Thanks in advance for any suggestions, I have not been able to find this online.

EXAMPLE

function imageRotationFunction(var1, var2, var3) {
   //logic I need help with
}

.

imageRotationFunction(<array of ID's to fade>, <number of seconds to fade in>, <number of seconds between fades>);

HTML PAGE HAS:

<div id='fadein0'>
  <img class='imageRotation' src='someimage0.png'>
  <img class='imageRotation' src='someimage1.png'>
  <img class='imageRotation' src='someimage2.png'>
  <img class='imageRotation' src='someimage3.png'>
</div>

<div id='fadein1'>
  <img class='imageRotation' src='otherimage0.png'>
  <img class='imageRotation' src='otherimage1.png'>
  <img class='imageRotation' src='otherimage2.png'>
  <img class='imageRotation' src='otherimage3.png'>
</div>

So you're wanting us to write you a custom slider plugin?

Jace Cotton
– Jace Cotton

2013-02-18 01:48:50 +00:00
Commented Feb 18, 2013 at 1:48 — Jace Cotton
– Jace Cotton, Commented Feb 18, 2013 at 1:48
If these help one and two.

The Alpha
– The Alpha

2013-02-18 01:52:15 +00:00
Commented Feb 18, 2013 at 1:52 — The Alpha
– The Alpha, Commented Feb 18, 2013 at 1:52

Niet the Dark Absol · Accepted Answer · 2013-02-18 01:57:06Z

Try something like this:

HTML:

<div class="fadebox">
  <img src="image0.png" />
  <img src="image1.png" />
  <img src="image2.png" />
  <img src="image3.png" />
</div>
<div class="fadebox">
  <img src="image0.png" />
  <img src="image1.png" />
  <img src="image2.png" />
  <img src="image3.png" />
</div>

CSS:

.fadebox {
    position:relative;
}
.fadebox>img {
    position:absolute;
    left:0; top:0;
    opacity:0;
    transition:opacity 1s linear;
    -webkit-transition:opacity 1s linear;
}
.fadebox>img:first-child {
    position:static;
}

JavaScript:

(function() {
    var divs = document.querySelectorAll(".fadebox"), l = divs.length, i;
    for( i=0; i<l; i++) {
        (function(div) {
            var imgs = div.children, l = imgs.length, i = -1,
                step = function() {
                    if(i > -1) imgs[i].style.opacity = 0;
                    i = (i+1)%l;
                    imgs[i].style.opacity = 1;
                };
            step();
            setInterval(step,5000);
        })(divs[i]);
    }
})();

In the above, 1s is the time it takes for the fade to happen, and 5000 is the number of milliseconds the between fades (including the transition, so in this case the image will stay displayed for 4 seconds)

Note that this only works in supporting browsers, like so:

IE, Chrome and Firefox should work just fine in their latest versions
IE9 works, but don't fade between images
IE8 and below don't work due to not supporting opacity
IE7 and below don't work due to not supporting querySelectorAll

The last two cases can be fixed by adding a suitable filter style (IE8) and shimming querySelectorAll (IE7 and below)

Collectives™ on Stack Overflow

Writing a JQuery/Javascript fading function

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related