Können wir in iframes ein- und ausblenden?

Question

Ist es möglich, Überblendungen in Iframes ein- und auszublenden?

Answer 1

Sie können es mit Jquery tun!

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

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

Answer 2

Fading oder zu verkleinern durch Veränderung der Opazität eines Elements im Laufe der Zeit erreicht werden kann, ein sehr einfaches Beispiel:

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

---

Während jQuery eine ist unglaubliche Bibliothek Ihre Nutzung sollte mehr als nur ihre Fähigkeit, ausgefallene Effekte zu erstellen gerechtfertigt werden. Eine Bibliothek sollte für ihre Vollständigkeit und Benutzerfreundlichkeit angenommen werden; nicht weil es zufällig nur eine Sache, die Sie verwenden möchten, anbieten.

Answer 3

Oder vielleicht können Sie CSS dies für Sie behandeln lassen. Mit ein wenig Javascript um den Effekt auszulösen.

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

Nur eine Sache, vielleicht möchten Sie Ihren iframe laden nur, wenn es, diese zu entfernen, nur um zu tun zu zeigen, wird src aus Ihr iframe in HTML und fügen Sie in Javascript mit iframe.src hinzu. Das war mein Fall.