Можем ли мы действительно исчезать и исчезать в iframes

Question

Можно ли делать переходы постепенного и постепенного исчезновения в iframes?

Answer 1

Появление или исчезновение может быть достигнуто путем изменения непрозрачности элемента во времени, очень простой пример:

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

---

Хотя jQuery - невероятная библиотека, ее использование должно быть оправдано не только способностью создавать необычные эффекты. Библиотека должна быть принята для ее полноты и простоты использования; не потому, что он предлагает просто одну вещь, которую вы, возможно, захотите использовать.

Answer 2

Вы можете сделать это с помощью jquery!

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

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

Answer 3

Или, может быть, вы можете позволить CSS обработать это для вас. С очень небольшим количеством javascript, чтобы вызвать эффект.

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

Только одна вещь, может быть, вы хотите загрузить свой iframe именно тогда, когда он собирается показывать, для этого просто удалите src из вашего iframe в HTML и добавьте javascript с помощью iframe.src. Это был мой случай.