0

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.

Edited by cloud09: n/a

2
Contributors
3
Replies
4
Views
7 Years
Discussion Span
Last Post by cloud09
0

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?

0

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...
  }
0

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 ;).

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.