Can we do fade in and fade out in iframes

Question

Is it possible to make fade in and fade out transitions in iframes?

Answer 1

Fading in or out 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();
}

---

While jQuery is an incredible library your usage of it should be justified by more than just its ability to create fancy effects. A library should be adopted for its completeness and ease of use; not because it happens to offer just one thing 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 a very little of 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...

Just one thing, maybe you want load your iframe just when it is going to show, to do this just remove src from your iframe in HTML, and add in javascript with iframe.src. That was my case.

Answer 4

You can use the onload property and a css animation to make the iframe fade in once loaded

<iframe
    src="..."
    onload="this.style.opacity = '1';"
    style="
        opacity: 0;
        transition-duration: 300ms;
        transition-property: opacity;
        transition-timing-function: ease-in-out;
    "
></iframe>