tinfanide Posted August 2, 2011 Share Posted August 2, 2011 <!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>Untitled Document</title><script>window.onload = function() { pic = document.getElementById("pic");}var pic = document.getElementById("pic");var img = []; img[0] = {src: "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png", cap: "", url: "", des: "" }; img[1] = {src: "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png", cap: "", url: "", des: "" }; img[2] = {src: "http://www.techlifeweb.com/facebook_logo.jpg", cap: "", url: "", des: "" }; img[3] = {src: "http://www.thetechherald.com/media/images/201115/Adobe_2.jpg", cap: "", url: "", des: "" };for(var imgs=[], i=0; i<img.length; i++){ imgs[i] = new Image(); imgs[i].src = img[i].src; }var o = 100;var p = -1;var t;function next(){ pic.style.filter = "alpha(opacity=100)"; if (p<img.length-1){ p++; } else {p=0;} pic.src = img[p].src;// I think the problem that troubles me starts from here: t = setInterval(fadeOut,10); }function fadeOut(){ pic.src = img[p].src; pic.style.filter = "alpha(opacity="+o+")"; pic.style.MozOpacity = o/100; pic.style.opacity = o/100; o -= 1; if(o<=0){ clearInterval(t);// This return may cause the problem but I don't know how to fix it return o=100; } }</script></head><body><img id="pic" src="http://1.bp.blogspot.com/_Mt4qyhflsHY/S8bE1G8JnyI/AAAAAAAAAgQ/Dhtm4ARMuXo/s1600/javascript_call.png" style="width: 500px; height: 500px;" /><br /><a href="#" onclick="next()">Next</a></body></html> What I originally wanted was to press next and a image is loaded (fine)and then the image fades away to 0 (fine again)and when next is pressed, a new image is there (fine)and it is again faded away (fine again)but I foundwhen users press next while the image is fading away (before its opacity becomes 0)The image starts fading in and out non-stopIs there a fix on this problem so that even users do so, a new image is loaded in a proper way? Link to comment Share on other sites More sharing options...
tinfanide Posted August 2, 2011 Author Share Posted August 2, 2011 <script>window.onload = function() { pic = document.getElementById("pic");}var pic = document.getElementById("pic");var img = []; img[0] = {src: "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png", cap: "", url: "", des: "" }; img[1] = {src: "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png", cap: "", url: "", des: "" }; img[2] = {src: "http://www.techlifeweb.com/facebook_logo.jpg", cap: "", url: "", des: "" }; img[3] = {src: "http://www.thetechherald.com/media/images/201115/Adobe_2.jpg", cap: "", url: "", des: "" };for(var imgs=[], i=0; i<img.length; i++){ imgs[i] = new Image(); imgs[i].src = img[i].src; }var o = 100;var p = -1;var t;function next(){ // Here's the fix: clearInterval(t);// pic.style.filter = "alpha(opacity=100)"; if (p<img.length-1){ p++; } else {p=0;} pic.src = img[p].src; t = setInterval(fadeOut,10); }function fadeOut(){ pic.src = img[p].src; pic.style.filter = "alpha(opacity="+o+")"; pic.style.MozOpacity = o/100; pic.style.opacity = o/100; o -= 1; if(o<=0){ clearInterval(t); return o=100; } }</script> I found the fix. A little bit careless about it before.clearInterval(t) Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.