so looking around questions , found handy piece of code want use.
function fade() { var op = 1; // initial opacity var thing = document.getelementbyid('fader'); var timer = setinterval(function () { if (op <= 0.1) { clearinterval(timer); thing.style.display = 'none'; } thing.style.opacity = op; thing.style.filter = 'alpha(opacity=' + op * 100 + ")"; op -= op * 0.1; }, 50); } function unfade() { var thing2 = document.getelementbyid('fader'); var op = 0.1; // initial opacity thing2.style.display = 'block'; var timer = setinterval(function () { if (op >= 1){ clearinterval(timer); } thing2.style.opacity = op; thing2.style.filter = 'alpha(opacity=' + op * 100 + ")"; op += op * 0.1; //alert("here"); }, 10); } can how these functions works explained little bit? wanted play around fade in , out view. link code button that, when clicked, fade blockquote id of 'fader' view, have both of these functions go once click 1 button?
edit: played around code ended test code this.
<!doctype html> <html> <head> <style> blockquote{ max-height: auto; max-width: auto; position: fixed; right: 50%; bottom: 50%; border-style: ridge; border-width: 5px; padding: 25px; } </style> </head> <body> <form> <blockquote id= 'fader'> <input type = 'button' id = 'fades' value = 'this fades.' onclick = 'fade(); unfade()'/> </blockquote> </form> </body> <script> function fade() { var op = 1; // initial opacity var thing = document.getelementbyid('fader'); var timer = setinterval(function () { if (op <= 0.1) { clearinterval(timer); thing.style.display = 'none'; } thing.style.opacity = op; thing.style.filter = 'alpha(opacity=' + op * 100 + ")"; op -= op * 0.1; }, 50); } function unfade() { var thing2 = document.getelementbyid('fader'); var op = 0.1; // initial opacity thing2.style.display = 'block'; var timer = setinterval(function () { if (op >= 1){ clearinterval(timer); } thing2.style.opacity = op; thing2.style.filter = 'alpha(opacity=' + op * 100 + ")"; op += op * 0.1; //alert("here"); }, 10); } </script> </html> problem fades , doesn't come back.
you need 'fade toggle', so, both, fade-in, , fade-out should happen on 1 click. in case, don't need 2 functions, can set additional 'flag', check conditions, , set fade direction (increment or decrement of opacity).
e.g. in case, if opacity lower 0.01 (if check op value, notice not rounded, , maybe don't need rounded value, need fade-out element completely, so in few moments opacity should ultra-low), fade direction should changed, - should increment opacity, , vice versa.
you this:
<blockquote id= 'fader'> <input type = 'button' id = 'fades' value = 'this fades.' onclick = 'fade_toggle(this.parentnode,true);'/> </blockquote> js:
function fade_toggle(el, check) { var op = 1; // initial opacity var timer = setinterval(function() { el.style.opacity = op; el.style.filter = 'alpha(opacity=' + op * 100 + ")"; if (op > 0.01 && check == true) { op -= op * 0.1; } if (op < 0.01) { check = false; } if (check == false && op < 1) { op += op * 0.1; } if (op > 0.9) { el.style.opacity = 1; check = true; clearinterval(timer); } }, 50); } 
Comments
Post a Comment