Javascript 我们可以在iFrame中进行淡入淡出吗

是否可以在iFrame中进行淡入淡出转换？

您可以使用jquery进行转换

---

可以通过随时间改变元素的不透明度来实现淡入淡出，这是一个非常简单的示例：

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

var-iframe=document.getElementById（'iframe'）；
衰减（iframe，1000）；
功能衰减（el，持续时间）{
/*
*@param el-要淡出的元素。
*@param duration-动画持续时间（毫秒）。
*/
var步长=10/持续时间，
不透明度=1；
函数next（）{
如果（不透明度或者可能，您可以让CSS为您处理此问题。只需少量javascript即可触发此效果

CSS:

\iframe\u选择器{
/*iframe的初始值，我们将通过javascript更改它们*/
不透明度：0；
/*注：In-out/2016不透明度在97.39%的浏览器上*/
/*只是一个额外的属性来显示多个过渡，不需要淡入淡出效果*/
身高：0；
/*在这里，您可以根据自己的意愿处理几个转换*/
过渡：不透明度2s缓进缓出，高度3s缓进缓出；
/*注意：添加所有前缀*/
}

Javascript

函数toogleIframe（iframe）{
//检查是否显示不透明度属性，
if（iframe.style.opacity==0）{
//并设置为原始值，
iframe.style.opacity=1；
iframe.style.height='500px'；
}否则{
//或者把它藏起来。
iframe.style.opacity=0；
iframe.style.height='0px'；
}
}
//现在，只要用它。。。
//示例：
domReady（函数（）{
toogleIframe（document.getElementById（'iframe_选择器'）；
});
var button=document.getElementById（“我的按钮”）；
button.onclick=函数（）{
toogleIframe（document.getElementById（'iframe_选择器'）；
};
//只需指定何时需要显示iframe。。。

有一件事，也许你想在iframe即将显示时加载它，要做到这一点，只需从HTML中的iframe中删除
src
，并使用
iframe.src
添加javascript。这就是我的情况。
+1非常漂亮的脚本！非常简洁！我最终不会使用jQuery。一个警告：
参数。被调用方
在javascript中已被弃用，因此最好使用命名函数。（我相应地编辑了您的答案）再次感谢！
if（不透明度）