1

我正在尝试使 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>
4

1 回答 1

1

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

<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>
于 2013-11-06T19:05:13.260 回答