All geek questions in one place

Fade in fade in javascript

I continue to work on: https://codereview.stackexchange.com/questions/7315/fade-in-and-fade-out-in-pure-javascript

What is the best way to determine if attenuation or fading is complete before setting a new function. This is my way, but I think there is a much better way?

I have added a warning to facilitate your viewing.

Why I want to do this because: if you press the buttons before the for loop completes, the animation will look bad.

I want the buttons to work only when the end of the attenuation is complete.

<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> </head> <body> <div> <span id="fade_in">Fade In</span> | <span id="fade_out">Fade Out</span></div> <div id="fading_div" style="display:none;height:100px;background:#f00">Fading Box</div> </div> </div> <script type="text/javascript"> var done_or_not = 'done'; // fade in function function function_opacity(opacity_value, fade_in_or_fade_out) { // fade_in_or_out - 0 = fade in, 1 = fade out document.getElementById('fading_div').style.opacity = opacity_value / 100; document.getElementById('fading_div').style.filter = 'alpha(opacity='+opacity_value+')'; if(fade_in_or_fade_out == 1 && opacity_value == 1) { document.getElementById('fading_div').style.display = 'none'; done_or_not = 'done'; alert(done_or_not); } if(fade_in_or_fade_out == 0 && opacity_value == 100) { done_or_not = 'done'; alert(done_or_not); } } window.onload =function(){ // fade in click document.getElementById('fade_in').onclick = function fadeIn() { document.getElementById('fading_div').style.display='block'; var timer = 0; if (done_or_not == 'done') { for (var i=1; i<=100; i++) { set_timeout_in = setTimeout("function_opacity("+i+",0)", timer * 10); timer++; done_or_not = 'not_done' } } }; // fade out click document.getElementById('fade_out').onclick = function fadeOut() { clearTimeout(set_timeout_in); var timer = 0; if (done_or_not == 'done') { for (var i=100; i>=1; i--) { set_timeout_out = setTimeout("function_opacity("+i+",1)", timer * 10); timer++; done_or_not = 'not_done' } } }; }// END window.onload </script> </body> </html>
+4
source share
4 answers

I agree with some comments. There are many good JavaScript libraries that not only make writing code easier, but also eliminate some browser compatibility issues from your hands.

Having said that, you can change your fade functions to accept a callback:

 function fadeIn(callback) { return function() { function step() { // Perform one step of the animation if (/* test whether animation is done*/) { callback(); // <-- call the callback } else { setTimeout(step, 10); } } setTimeout(step, 0); // <-- begin the animation }; } document.getElementById('fade_in').onclick = fadeIn(function() { alert("Done."); });

So fadeIn will return a function. This function will be used as an onclick handler. You can pass fadeIn function that will be called after you have completed the last step of your animation. The internal function (returned by fadeIn ) will still have access to callback , as JavaScript creates closure around it.

Your animation code may still use many enhancements, but this is briefly what most JavaScript libraries do:

  • Perform the animation step by step;
  • Check if you are completed;
  • Call the user callback after the last step.

One last thing to keep in mind: animation can become quite complex. If, for example, you need a reliable way to determine the duration of an animation, you will want to use the tween functions (also something that most libraries do). If math isn’t your forte, it might not be so nice ...

In response to your comment: you say you want it to continue to work the same way; "If the bussy function, nothing will happen."

So, if I understand correctly, you want the animations to block. In fact, I can tell you two things:

  • Your animations are not blocked (at least not the animations themselves - read below).
  • You can still work the way you want with any asynchronous animation.

This is what you use done_or_not for. This, in fact, is the big picture. Usually, a boolean value ( true or false ) is used instead of a string, but the principle is always the same:

 // Before anything else: var done = false; // Define a callback: function myCallback() { done = true; // Do something else } // Perform the asynchronous action (eg animations): done = false; doSomething(myCallback);

I created a simple animation example that you want to execute using jQuery only. You can look here: http://jsfiddle.net/PPvG/k73hU/

 var buttonFadeIn = $('#fade_in'); var buttonFadeOut = $('#fade_out'); var fadingDiv = $('#fading_div'); var done = true; buttonFadeIn.click(function() { if (done) { // Set done to false: done = false; // Start the animation: fadingDiv.fadeIn( 1500, // <- 1500 ms = 1.5 second function() { // When the animation is finished, set done to true again: done = true; } ); } }); buttonFadeOut.click(function() { // Same as above, but using 'fadeOut'. });

Because of the done variable, the buttons will only react if the animation is complete. And, as you can see, the code is really short and readable. This is an advantage of using a library such as jQuery. But, of course, you can create your own solution yourself.

Regarding performance: most JS libraries use tweens to perform animations that are usually more efficient than fixed steps. It definitely looks smoother for the user, because the position depends on the elapsed time , and not on the number of steps taken .

Hope this helps. :-)

+4
source

you can move your fade code to your own function

 var alpha = 100 function fade() { if (alpha > 0) { alpha -= 1; *your opacity changes* (eg: .opacity = (alpha/100); .style.filter = 'alpha(opacity='+alpha+')';) } else { *complete - modify the click event* } }

you can add .MozOpacity to work with .opacity and .filter. as mentioned in the comments above, although canceling or forcibly terminating the attenuation may be better than preventing new clicks during the loop.

ps: I respect you for coding it yourself. javascript libraries are overused and often not needed.

+1
source

This can be solved in several ways. Please take a look at the code on the cover of my home page. http://marek.zielonkowski.com/thescript.js I did this by clearing the timeout (I think I don’t remember very well, because it was several years ago) clearInterval(isMoving); or

 this.fadeIn = function (){ iCurrentAlpha = (iCurrentAlpha===null) ? alpha : iCurrentAlpha; clearInterval(isFading); isFading = setInterval(function(){changeFading(1);},timer); }

Or you can program your custom events and send the listener something like "onFadeOutStop".

And please don't use setTimeout ('function_name ()') with quotes - because it's a bad habbit (setting Timeout behaves then like eval, which should be evil :)

0
source

You must use jquery. you can run the function after the animation

 $('#clickthis').click(function(){ //jquery has really easy way of animating css properties //the 5000 is the duration in milliseconds $('#animatethis').animate({opacity:0},5000,function(){ //this will only run once the animation is complete alert('finished animating'); }); //or use the function.. $('#animatethis').fadeOut(5000,function(){ //this will only run once the animation is complete alert('finished fading out'); }); });

who should do it. I have not tested it, so forgive me if he has any errors.

-L

0
source

Source: https://habr.com/ru/post/1388605/

More articles:


All Articles