I have an image rotator that uses nested intervals. The outer one switches the images, and the inner one preforms the fade. The problem is is that the display is not updated during the interval function, and so, the fade is not displayed; the new image just appears- no fade. Is there anyway to force the display to update during the interval? Here is the code:

rotate: function() {
		intA = null;
		intB = null;
		elem = 1;
		pass = true;
		o = 0;
		intA = setInterval(function() {
			if(elem == 1 && pass == false) {
				rotator.elems[rotator.elems.length - 1].style.display = "none";
				rotator.elems[rotator.elems.length - 1].style.opacity = '0';
				rotator.elems[rotator.elems.length - 1].style.mozOpacity = '0';
				rotator.elems[rotator.elems.length - 1].style.filter = "alpha(opacity=0)";
				pass = true;}
			else {
				rotator.elems[elem].style.display = "block";
			intB = setInterval(function() {
				rotator.elems[elem].style.opacity = o * .01;
				rotator.elems[elem].style.mozOpacity = o * .01;
				rotator.elems[elem].style.filter = "alpha(opacity=" + o + ")";
				o++;
				if(o == 101) {
					clearInterval(intB);
					o = 0;}}, 5);
			elem++;}
			if(elem >= rotator.elems.length) {
				for(i = 1; i < rotator.elems.length - 1; i++) {
					rotator.elems[i].style.display = "none";
					rotator.elems[i].style.opacity = '0';
					rotator.elems[i].style.mozOpacity = '0';
					rotator.elems[i].style.filter = "alpha(opacity=0)";}
				elem = 1;
				pass = false;}}, rotator.time + 500);}

rotator.time is value higher than 2000 ms.

Recommended Answers

All 3 Replies

If no one has a way to force the display to update, perhaps someone has another way of creating an image rotator that fades the images in?

Hi,
I think the only way to get javascript to update the display is to leave the session. Therefore you can achieve what you want by calling a function with window.setTimeout.

window.setTimeout("rotate("+var1+","+var2+")",10)
function rotate(var1,var2)
{
  //take a step...
  if(not done)
    window.setTimeout("rotate("+var1+","+var2+")",10)
  else
  {
    //Done...
  }

Well I would have liked a reply a little (lot) sooner, I do appreciate it. I ended up using a jquery image rotator, but this will help in the future. Thank you ;).

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.