Can we fade out and fade in iframe

Question

Is it possible to fade and fade transitions in an iframe?

Answer 1

Attenuation or output can be achieved by changing the opacity of an element over time, a very simple example:

var iframe = document.getElementById('iframe'); fadeOut(iframe, 1000); function fadeOut(el, duration) { /* * @param el - The element to be faded out. * @param duration - Animation duration in milliseconds. */ var step = 10 / duration, opacity = 1; function next() { if (opacity <= 0) { return; } el.style.opacity = ( opacity -= step ); setTimeout(next, 10); } next(); } 

---

Although jQuery is an incredible library, the use of which should be justified not only by its ability to create fantastic effects. The library should be accepted for its completeness and ease of use; not because it offers only one thing that you might want to use.

Answer 2

you can do it with jquery!

http://docs.jquery.com/Effects/fadeOut

http://docs.jquery.com/Effects/fadeIn

Answer 3

Or maybe you can let CSS handle this for you. With very little javascript to trigger the effect.

CSS

 #iframe_selector { /* initial values for iframe, we'll change them via javascript. */ opacity: 0; /* Note: In out/2016 opacity is on 97.39% of browsers */ /* Just an extra property to show multiple transitions, not needed for fade effect. */ height: 0; /* Here you can handle a couple of transitions as you wish */ transition: opacity 2s ease-in-out, height 3s ease-in-out; /* Note: Add all prefixes */ } 

Javascript

 function toogleIframe(iframe) { //Check if is show with opacity property, if (iframe.style.opacity == 0) { //and set to original values, iframe.style.opacity = 1; iframe.style.height = '500px'; } else { //or hide it. iframe.style.opacity = 0; iframe.style.height = '0px'; } } //And now, just use it... //Examples: domReady(function() { toogleIframe(document.getElementById('iframe_selector')); }); var button = document.getElementById('my_button'); button.onclick = function() { toogleIframe(document.getElementById('iframe_selector')); }; //Just specify when your iframe needs to be show or not... 

Only one thing, maybe you want to load your iframe only when it is shown to do this, just remove src from your iframe in HTML and add to javascript using iframe.src . That was my case.