Peut-on faire de fade in et fade out dans des iframes

La décoloration dans ou à l'extérieur peut être réalisée en modifiant l'opacité d'un élément au fil du temps, un exemple très simple:

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();
}

---

Alors que jQuery est une incroyable bibliothèque de votre utilisation de celui-ci doit être justifiée par plus que juste sa capacité à créer des effets de fantaisie. Une bibliothèque devrait être adopté pour son exhaustivité et sa facilité d'utilisation; pas parce qu'il arrive à nous offrir un chose que vous pourriez utiliser.

OriginalL'auteur James

Ou peut-être, vous pouvez laisser CSS gérer cela pour vous. Avec un peu de javascript pour déclencher l'effet.

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...

Juste une chose, peut-être que vous voulez charger votre iframe juste quand il va voir, pour faire, il suffit de supprimer src de votre iframe dans le code HTML, et ajouter en javascript avec iframe.src. C'était mon cas.

OriginalL'auteur Vagner