帧淡出/淡入

Iframe FadeOut/FadeIn

本文关键字：淡入 淡出      更新时间：2023-09-26

我试图让 iframe 淡出然后淡入，但我似乎无法正确获取代码。我认为我非常接近，但由于某种原因，代码就像我的 jquery 不存在一样。有人能确定我哪里出错了吗？

.HTML

    <body>
<center>
    <div class="headbackground">
        <h1 class="headfont1"> Kellen's Homepage</h1>
    <div id="menubar">
        <a id="menulink" href="homepage.html" target="iframe1"> Homepage </a>
        <a id="menulink" href="about.html" target="iframe1"> About Me </a>
        <a id="menulink" href="projects.html" target="iframe1"> Projects </a>
        <a id="menulink" href="resume.html" target="iframe1"> Resume </a>
    </div>
    </div>
</center>
<div id="iframediv">
    <iframe id="iframe1" name="iframe1" src="" frameborder="0"></iframe>
</div>
</body>

.CSS

.headbackground {
    background-color:RGBa(0,0,0,.75);
    z-index:2;
    margin-top:0;
}
div#menubar {
    padding: 24px;
}
div#menubar > a {
    font:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:17px;
    background:#333;
    padding: 12px 24px;
    color: #999;
    margin-right: 10px;
    text-decoration:none;
    border-radius:3px;
    transition: background 0.3s linear 0s, color 0.3s linear 0s;
}
div#menubar > a:hover {
    background:#36F;
    color:#FFF;
    z-index:2;
}
#iframe1 {
    position: absolute;
    left: 0px;
    top: 215px;
    width: 100%;
    height: 100%;
    z-index:1;
}
body {
    background-image:url(images/ronaldo-elche-real-madrid-live-bale-isco-best-team-celebrating-goal.jpg);
    background-repeat:repeat-y;
    background-position:top center;
    background-attachment:fixed;
    background-size:cover;
    margin:0;
    overflow:scroll;
}

jQuery

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
$(document).ready(function () {
    $('div#menubar > a').click(function(){
        var iframeSrc = $(this).attr('href');
        $('#iframediv').fadeOut(1000,function(){
            $('#iframediv iframe').attr('src',iframeSrc);
            $('#iframediv').fadeIn(1000);
        });
        return false;
    });
});
</script>

那是因为对于浏览器来说，你的代码不在那里。代码需要位于单独的脚本标记中。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
    $('div#menubar > a').click(function(){
        var iframeSrc = $(this).attr('href');
        $('#iframediv').fadeOut(1000,function(){
            $('#iframediv iframe').attr('src',iframeSrc);
            $('#iframediv').fadeIn(1000);
        });
        return false;
    });
});
</script>
相关文章：