44453

Fade element in and run a callback

Question:

Ok, I've tried this many different ways. I'm trying to learn javascript without always resorting to jQuery. I'm trying to create similar functionality for fading an element in and then out (using callbacks as arguments).

Given this element: <div id="something">asdf</div>

When I run this javascript (or something similar), I end up either getting flickering effects (I think it's from both the fadeIn and fadeOut functions running) or just having it fade in. More problems happen when I try to do this to several elements at once (in a for loop), but I'm guessing that "closures" will be the answer to that. One thing at a time.

function setOpacity(element, value) { element.style.opacity = value/100; element.style.filter = 'alpha(opacity=' + value + ')'; } function fadeIn(element, speed, callback) { if( ! speed ) { speed = 1000; } var speed = speed / 100; for (var i = 0; i < 100; i++) { setTimeout((function(i){ return function(){ setOpacity(element, i); } })(i), (i * speed)); } if (callback && typeof(callback) === 'function') { setTimeout(function(){ return function() { callback(); } }, (100 * speed)); } } function fadeOut(element, speed, callback) { if( ! speed ) { speed = 1000; } var speed = speed / 100; for (var i = 100; i > 0; i--) { setTimeout((function(i){ return function(){ setOpacity(element, i); } })(i), ((100 - i) * speed)); } if (callback && typeof(callback) === 'function') { setTimeout(function(){ return function(){ callback(); } }, (100 * speed)); } } element = document.getElementById('something'); element.onclick = function() { fadeIn(element, 1000, function() { fadeOut(element, 1000, function() { // All done }); }); }

Answer1:

Try using <a href="https://developer.mozilla.org/en/window.setInterval" rel="nofollow">setInterval</a> instead of <a href="https://developer.mozilla.org/en/window.setTimeout" rel="nofollow">setTimeout</a>:

var timer, i = 0; timer = setInterval(function() { if(++i == 100) { clearInterval(timer); callback(); return; } setOpacity(element, i); }, speed);

Launching 101 timers at once isn't that friendly to the browser but a single interval timer that stops itself isn't a big deal. Also, 100 iterations is probably too high, 15-20 is probably more than enough; you can play with the number after you've switched to setInterval, you might be surprised how low you can take it without affecting the visual performance.

Recommend

  • JButton is drawing behind an image
  • On hover show DIV flicker
  • Javascript Image Reloading; flickers
  • WS_EX_COMPOSITED causes endless repainting when restoring form from minimize state
  • Running jQuery ajax function when user clicks the back or forward buttons
  • Pop up box to appear once per site visit
  • onmouseover onmouseout fadeIn fadeOut no jQuery
  • Fading in large images in Chrome
  • Increasing dimensions on hover without changing the position of other elements
  • How to change slowly background attributes in jquery?
  • format JSON value with a php function and print result inside a div#id
  • Android fade in not working
  • I have a modal that opens a second modal and cannot close the first modal if open then close the sec
  • jQueryUI dialog replacement for confirm?
  • div fade-in when window is scrolled a certain distance from the top
  • Can long-polling be achieved in Restlet by just making the thread sleep?
  • What is the default HTTP verb in WebApi ? GET or POST?
  • ckeditor and jquery UI dialog not working
  • How to make R's read_csv2() recognise the text characters properly
  • Django model inheritance, filtering models
  • Jenkins: FATAL: Could not initialize class hudson.util.ProcessTree$UnixReflection
  • How can I set a binding to a Combox in a UserControl?
  • Does it make sense to call System.gc() and Thread.sleep() when working on Bitmaps?
  • How to run “Deployd” on port 80 instead of port 5000 in webserver.
  • CSS Linear-gradient formatting issue accross different browsers
  • Change JButton Shape while respecting Look And Feel
  • Problems to linebreak with an int in JLabel
  • How to recover from a Spring Social ExpiredAuthorizationException
  • output of program is not same as passed argument
  • Menu Color Fade on Hover with Jquery
  • Does CUDA 5 support STL or THRUST inside the device code?
  • ActionScript 2 vs ActionScript 3 performance
  • Statically linking a C++ library to a C# process using CLI or any other way
  • How can I estimate amount of memory left with calling System.gc()?
  • Why winpcap requires both .lib and .dll to run?
  • Apache 2.4 - remove | delete | uninstall
  • -fvisibility=hidden not passed by compiler for Debug builds
  • Can Visual Studio XAML designer handle font family names with spaces as a resource?
  • How can I remove ASP.NET Designer.cs files?
  • Are Kotlin's Float, Int etc optimised to built-in types in the JVM? [duplicate]