tinfanide Posted July 14, 2011 Share Posted July 14, 2011 <script type ="text/javascript">setInterval(fadeOut,50); var o = 100; function fadeOut(){ var pic = document.getElementById("pic"); pic.style.filter = "alpha(opacity="+o+")"; pic.style.MozOpacity = o/100; pic.style.opacity = o/100; o -= 1; if(o<=0){ setInterval(fadeIn,50); } } var n = 0; function fadeIn(){ var pic = document.getElementById("pic"); pic.style.filter = "alpha(opacity="+n+")"; pic.style.MozOpacity = n/100; pic.style.opacity = n/100; n += 1; if(n>=100){ setInterval(fadeOut,50); } }</script> <img id="pic" src="http://www.ibiblio.org/wm/paint/auth/pissarro/pissarro.village-path.jpg" /> I tried using if statement to make the fadeIn and fadeOut functions run after each other so that they run continuously non-stop.But the codes failed. Where's wrong that needs to be altered? Link to comment Share on other sites More sharing options...
thescientist Posted July 14, 2011 Share Posted July 14, 2011 edit: nm, lol Link to comment Share on other sites More sharing options...
jeffman Posted July 14, 2011 Share Posted July 14, 2011 When you call setInterval without assigning it to a variable, there's no way to stop it. Every subsequent call sets up a new interval that runs simultaneously. And they grow and grow.What you need to do is assign setInterval to a global variable, likemyInt = setInterval ( ......Then, before you call setInterval again, call clearInterval to cancel the first:clearInterval(myInt); Link to comment Share on other sites More sharing options...
tinfanide Posted July 15, 2011 Author Share Posted July 15, 2011 When you call setInterval without assigning it to a variable, there's no way to stop it. Every subsequent call sets up a new interval that runs simultaneously. And they grow and grow.What you need to do is assign setInterval to a global variable, likemyInt = setInterval ( ......Then, before you call setInterval again, call clearInterval to cancel the first:clearInterval(myInt);Yes, it's the point, clearInterval which I forgot.But after I set clearInterval and them global variables. They still cannot fadeout and fadein and then fadeout again and again.I found it seems that the if statement in the fadeIn function is not working cos it does clear the interval of fadeIn but does not kick off the function fadeOut so the loop won't go on again and again as expected.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JS: setInterval | CSS: opacity</title><script type ="text/javascript"> var o = 100; var n = 0; function fadeOut(){ var pic = document.getElementById("pic"); o -= 1; pic.style.filter = "alpha(opacity="+o+")"; pic.style.MozOpacity = o/100; pic.style.opacity = o/100; fOut = setInterval(fadeOut,100); if(o<=0){ clearInterval(fOut); o = 100; fIn = setInterval(fadeIn,100); } } function fadeIn(){ var pic = document.getElementById("pic"); n += 1; pic.style.filter = "alpha(opacity="+n+")"; pic.style.MozOpacity = n/100; pic.style.opacity = n/100; if(n>=100){ clearInterval(fIn); n = 0; fOut; } }window.onload = fadeOut; </script></head><body><img id="pic" src="http://www.ibiblio.org/wm/paint/auth/pissarro/pissarro.village-path.jpg" /></body></html> Link to comment Share on other sites More sharing options...
tinfanide Posted July 15, 2011 Author Share Posted July 15, 2011 I've just found the answer to my own doubt.I realise that I should have set a virtual counter (which I have learnt from the folks here in some of my previous threads) andthe person who wrote the below scripts set the variables plus and minus.This reminded me of using 1 and 0 (true and false) to control the fade-in and fade-out functions.Really difficult for me to get used to the way JS is run. value = 0;var plus = 1;var minus = 0;function IE(){ if (value<100 && plus){ value += 1; } else{ plus = 0; minus = 1; } if (value>0 && minus){ value -= 1; } else{ plus = 1; minus = 0; }document.getElementById("img").filters[0].opacity = value;}function MOZ(){ if (value<100 && plus){ value += 1; } else{ plus = 0; minus = 1; } if (value>0 && minus){ value -= 1; } else{ plus = 1; minus = 0; }document.getElementById("img").style.MozOpacity = value + "%";}if (window.sidebar){ setInterval("MOZ()",25)}if (document.all){ setInterval("IE()",25)} Link to comment Share on other sites More sharing options...
ShadowMage Posted July 15, 2011 Share Posted July 15, 2011 Egads!! Don't use that second bit of code you just posted! You can easily fix your first one, which is much better code.All you need to do is remove the n variable and replace it with the o variable. Either that or reset each one back to their original values in the if statement before calling the setInterval again, but it's easier to just use one variable.And second, you need to actually make your setInterval variables global. You've assigned them to variables, but not global variables.In the end you should have something like this: var o = 100;//Declare t here in the global space//Every time you use setInterval or clearInterval, use tvar t;window.onload = function() { t = setInterval(fadeOut, 50);}function fadeOut(){ var pic = document.getElementById("pic"); pic.style.filter = "alpha(opacity="+o+")"; pic.style.MozOpacity = o/100; pic.style.opacity = o/100; o -= 1; if(o<=0){ clearInterval(t); t = setInterval(fadeIn, 50); }}function fadeIn(){ var pic = document.getElementById("pic"); pic.style.filter = "alpha(opacity="+o+")"; pic.style.MozOpacity = o/100; pic.style.opacity = o/100; o += 1; if(o>=100){ clearInterval(t); t = setInterval(fadeOut, 50); }} Link to comment Share on other sites More sharing options...
tinfanide Posted July 15, 2011 Author Share Posted July 15, 2011 Egads!! Don't use that second bit of code you just posted! You can easily fix your first one, which is much better code.All you need to do is remove the n variable and replace it with the o variable. Either that or reset each one back to their original values in the if statement before calling the setInterval again, but it's easier to just use one variable.And second, you need to actually make your setInterval variables global. You've assigned them to variables, but not global variables.In the end you should have something like this:var o = 100;//Declare t here in the global space//Every time you use setInterval or clearInterval, use tvar t;window.onload = function() { t = setInterval(fadeOut, 50);}function fadeOut(){ var pic = document.getElementById("pic"); pic.style.filter = "alpha(opacity="+o+")"; pic.style.MozOpacity = o/100; pic.style.opacity = o/100; o -= 1; if(o<=0){ clearInterval(t); t = setInterval(fadeIn, 50); }}function fadeIn(){ var pic = document.getElementById("pic"); pic.style.filter = "alpha(opacity="+o+")"; pic.style.MozOpacity = o/100; pic.style.opacity = o/100; o += 1; if(o>=100){ clearInterval(t); t = setInterval(fadeOut, 50); }} Beautiful. Without the hints ya give me, I would have dragged myself in it for days.The global variable to be set is the key. I see.By the way, what's the problem with the second bit of codes? Why is that not good code? Link to comment Share on other sites More sharing options...
jeffman Posted July 15, 2011 Share Posted July 15, 2011 Browser sniffing is the problem. It makes the assumption that the thing you're having trouble with is absolutely connected to a browser, so it does not consider the fact that browsers evolve. Every new version of IE, for example, has more standards-compliant features, and they will be updated and maintained, while the older features may not. So your second code will fork IE 11 off to the alpha filter, even though IE 11 might implement normal opacity better than the alpha filter. Your original and final code lets every version of IE decide for itself which opacity technique it wants to use.As a rule, if you find yourself thinking about browser sniffing, stop and ask someone if there is a better way. I would talk about feature-detection, but that is not the topic of this thread. Link to comment Share on other sites More sharing options...
tinfanide Posted July 15, 2011 Author Share Posted July 15, 2011 Browser sniffing is the problem. It makes the assumption that the thing you're having trouble with is absolutely connected to a browser, so it does not consider the fact that browsers evolve. Every new version of IE, for example, has more standards-compliant features, and they will be updated and maintained, while the older features may not. So your second code will fork IE 11 off to the alpha filter, even though IE 11 might implement normal opacity better than the alpha filter. Your original and final code lets every version of IE decide for itself which opacity technique it wants to use.As a rule, if you find yourself thinking about browser sniffing, stop and ask someone if there is a better way. I would talk about feature-detection, but that is not the topic of this thread.I see what you meant now. Browser sniffing is far beyond what I'm learning now, though. Link to comment Share on other sites More sharing options...
ShadowMage Posted July 15, 2011 Share Posted July 15, 2011 I see what you meant now. Browser sniffing is far beyond what I'm learning now, though.Actually browser sniffing is pretty basic. Far more basic than timing and animation like you're working on right now. It just isn't best practice and so it's rarely taught (at least on good tutorials). Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.