Question

我正在尝试创建在点击时淡入div和iframe的函数。 iframe嵌套在div中。有用。不幸的是，当我想让它们都淡出时它不起作用。尽管jQuery启动了淡出命令，但div淡出了display:none属性并且iframe保持display:inline。有人可以帮我解决一下吗？

我的HTML：

<div id="icontent">
    <div id="frame">
        <input type="button" id="hide" value=""/>
        <iframe src="" scrolling="no" frameborder="0" id="mainFrame" name="mainFrame"></iframe>
    </div>
</div>

我的jQuery：

jQuery(document).ready(function($) {
$('.gallery').on('click', 'a', function(event) {
    event.preventDefault();
    var link = $(this).prop('href');
     $("#icontent").fadeIn(200).width($(window).width());
    $("#mainFrame").attr("src", link).load(function(){ 
                $("#mainFrame").contents().find('body').css("background-image", "none").css("background-color", "transparent");
                $("#mainFrame").fadeIn(300);
            }) 

});
$("#hide").click(function () {
    $("#icontent").fadeOut(200);
    setTimeout(function(){
        $("#mainFrame").attr("src", "about:blank").fadeOut(10);
    }, 250);
});
$("#icontent").click(function () {
    $("#icontent").fadeOut(200);
    setTimeout(function(){
        $("#mainFrame").attr("src", "about:blank").fadeOut(10);
    }, 250);
});
$(document).on( 'keydown', function ( e ) {
    if ( e.keyCode === 27 ) { // ESC
    $("#icontent").fadeOut(200);
    setTimeout(function(){
        $("#mainFrame").attr("src", "about:blank").fadeOut(10);
    }, 250);
    }
});
});

我的CSS：

#frame{width:53.125em;margin:3.125em auto;position:relative;}
#mainFrame{width:53.125em;height:40.625em;overflow:hidden;background:none transparent;display:none;}
#icontent{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent url(images/tlogaleria.jpg);background-size:cover;text-align:center;display:none;z-index:10000;}
#loader{position:absolute;top:60%;left:20%;padding:0.375em;height:1em;width:1em;background:white url(images/ajax-loader.gif) no-repeat 50%;display:none;border-radius:1.563em;opacity:0.8;z-index:100;}
#hide{top:-1.438em;right:1.563em;position:absolute;width:1.25em;height:1.25em;border:0 none;padding:0;margin:0;}
.svg #hide{background:transparent url(images/close.svg) no-repeat;background-size:100% 100%;}
.no-svg #hide{background:transparent url(images/fallback/close.png) no-repeat;background-size:100% 100%;}
#hide:hover{opacity:0.5;}
#hide:hover{cursor:pointer;}

你可以看到它工作here，点击左边的第一个轮播项目（带有EF-2000图像的那个;）

提前感谢所有提示，欢呼，Dan。

无法设置display：none到iFrame，为什么？

0 个答案: