Fadiing In & Out Images

[kliz0328]

I found a script on W3C that makes images fade in and out and am trying to pair it with a script that rotates images. I can get it to work when I set the fade in and fade out seperate to MOUSEOVER and MOUSEOUT, but when I try to put the function calls in the picture rotation script it stops working. I can get it to either fade in or fade out, but as soon as I add the call to the other function is stops working. Below is my code any ideas?

j=0
function refresh()
{
clean()
document.getElementById('pic').src='imagess/pic' + j + '.gif'
fog()
j+=1
if (j > 2)
{
  j=0
}
setTimeout('refresh()', 2*1000)
}

function clean()
{
interval=setInterval("makeclean(pic)",50)
}
function fog()
{
interval=setInterval("foggy(pic)",50)
}
function foggy()
{
  if (document.getElementById('pic').filters.alpha.opacity!=44)
  {
	  document.getElementById('pic').filters.alpha.opacity-=4
  }
  else
  {
  	clearInterval(interval)
  }
}
function makeclean()
{
if (document.getElementById('pic').filters.alpha.opacity<100)
	{
	document.getElementById('pic').filters.alpha.opacity+=4
	}
else if (window.interval)
	{
	clearInterval(interval)
	}
}

 

[theniteowl]

You have not shown how the mouse events occur or even what you want the ultimate result to be.

You could be having collisions between your setInterval and setTimeout commands.
You are creating a loop for your makeclear function so every 50 miliseconds it executes again until such time as the opacity of the current image is greater or equal to 100.
When the opacity reaches 100 or higher it clears the interval. That is all well and good as far as it goes.
But what happens when your setTimeout command from your refresh function expires? It will execute the clear/makeclear functions again for a new image but if the old interval is still running you end up with multiple intervals in memory. As I understand it with intervals and timers if you create another while one of the same name is running you are not clearing the first instance and run into problems.

Not knowing what your full intentions are I would guess that you want the images to rotate and they should fade in when loaded then fade out again before the next image loads.
I also suspect that when you do a mouseover on a smaller image you want the currently displayed larger image to change to the one being moused over?

You just have to be careful to close out any existing intervals or timeouts as needed.
At the top of your refresh function put in a test for interval and cancel it if it exists that way you cannot end up with a hanging interval.

In your mouseover event (if what I described above is what you intend) you want to run a function that will cancel the current timeout and cancel any existing interval, then set a new image and start the fad-in effect.
What you have to consider at that point though is, do you fade out the existing image before loading the new one or immediately change to the hovered over image and begin fade in? And once the new image is shown do you go back into the automatic rotation at the new position or where the last one left off? It is easy enough to set a new timeout to call refresh which will pick back up at the current value of j.

Just make sure that every time you do something that will change the image that you cancel the previous intervals before creating new ones.


It's hard to think outside the box when I'm trapped in a cubicle.