Pouvons-nous faire un fondu et un fondu dans les iframes?

Question

Est-il possible de faire des fondus de transition et de fondu dans les iframes?

Answer 1

vous pouvez le faire avec jquery!

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

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

Answer 2

fading ou out peut être obtenue en changeant 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 bibliothèque incroyable votre utilisation devrait être justifiée par plus que sa capacité à créer des effets de fantaisie. Une bibliothèque devrait être adoptée pour son exhaustivité et sa facilité d'utilisation; pas parce qu'il arrive à offrir une chose que vous pourriez vouloir utiliser.

Answer 3

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 au moment où il va montrer, pour ce faire il suffit de retirer src de votre iframe en HTML, et ajoutez en javascript avec iframe.src. C'était mon cas.