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>