我正在为我哥哥的一个页面工作。我主要使用Jquery和HTML来构建它。
我遇到的问题是IE浏览器和FireFox中的页面加载正常但是当你在Safari中加载它时会爆炸。你不能去卷轴链接没有它全部分开。当你点击实力时，它应该扩展4个视频。然后当你点击另一个按钮时，它应该关闭它们并继续前进。然而它只是让它们开放。这只是在Safari Mind you中。
这是链接 http://anthonyrussell.info/test/jbp/index.html
这是我的来源
<!--This site is an RT Applications Inc. Production (http://www.AnthonyRussell.info) -->
<!--None of the content on this site is in the public domain. Anything that is taken from this site must first be approaved by the sites owner-->
<!--http://www.JaysonBernard.com Is owned by JaysonBernard and maintained by RT Applications Inc.-->
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><!-- for running live-->
<!-- <script src="jquery-1.9.1.min.js"></script> <!--for running local-->
<script>
$(document).ready(function(){
$("#WelcomeTable").hide();
$("#Count").show();
$("#Count").text("5").delay(500).fadeOut(1000,function(){
$("#Count").text("4").show().delay(500).fadeOut(1000,function(){
$("#Count").text("3").show().delay(500).fadeOut(1000,function(){
$("#Count").text("2").show().delay(500).fadeOut(1000,function(){
$("#Count").text("1").show().delay(500).fadeOut(1000, function(){
$("#WelcomeTable").fadeIn(500,function(){
$("#WelcomeImage").fadeIn(500);
$("#Title").fadeIn(500,function(){
$("#HomeBt").fadeIn(500,function(){
$("#ReelBt").fadeIn(500,function(){
$("#ResumeBt").fadeIn(500,function(){
$("#PhotosBt").fadeIn(500,function(){
$("#ContactBt").fadeIn(500);
});
});
});
});
});
});
});
});
});
});
});
$("#HomeBt").click(function(){
$("#video").hide();
$(".content").hide();
$("#WelcomeImage").slideDown(200);
});
$("#ReelBt").click(function(){
$("#video").hide();
$(".content").hide();
$("#WelcomeImage").slideUp(200, function(){
$("#ReelPage").slideDown(1000);
});
});
$("#ResumeBt").click(function(){
$("#video").hide();
$(".content").hide();
$("#WelcomeImage").slideUp(200, function(){
$("#ResumePage").slideDown(1000);
});
});
$("#PhotosBt").click(function(){
$("#video").hide();
$(".content").hide();
$("#WelcomeImage").slideUp(200, function(){
$("#PhotosPage").slideDown(1000);
});
});
$("#ContactBt").click(function(){
$("#video").hide();
$(".content").hide();
$("#WelcomeImage").slideUp(200, function(){
$("#ContactPage").slideDown(1000);
});
});
$("#submit").click(function(){
alert("I Told you not to click me bitch!");
});
$("#img1").mouseover(function(){
$("#img1").css("width","400");
});
$("#img1").mouseout(function(){
$("#img1").css("width","200");
});
$("#img2").mouseover(function(){
$("#img2").css("width","400");
});
$("#img2").mouseout(function(){
$("#img2").css("width","200");
});
$("#img3").mouseover(function(){
$("#img3").css("width","400");
});
$("#img3").mouseout(function(){
$("#img3").css("width","200");
});
$("#img4").mouseover(function(){
$("#img4").css("width","400");
});
$("#img4").mouseout(function(){
$("#img4").css("width","200");
});
$("#img5").mouseover(function(){
$("#img5").css("width","400");
});
$("#img5").mouseout(function(){
$("#img5").css("width","200");
});
$("#img6").mouseover(function(){
$("#img6").css("width","400");
});
$("#img6").mouseout(function(){
$("#img6").css("width","200");
});
$("#img7").mouseover(function(){
$("#img7").css("width","400");
});
$("#img7").mouseout(function(){
$("#img7").css("width","200");
});
$("#img8").mouseover(function(){
$("#img8").css("width","400");
});
$("#img8").mouseout(function(){
$("#img8").css("width","200");
});
$("#img9").mouseover(function(){
$("#img9").css("width","400");
});
$("#img9").mouseout(function(){
$("#img9").css("width","200");
});
$("#img10").mouseover(function(){
$("#img10").css("width","400");
});
$("#img10").mouseout(function(){
$("#img10").css("width","200");
});
$("#img11").mouseover(function(){
$("#img11").css("width","400");
});
$("#img11").mouseout(function(){
$("#img11").css("width","200");
});
$("#img12").mouseover(function(){
$("#img12").css("width","400");
});
$("#img12").mouseout(function(){
$("#img12").css("width","200");
});
$("#img13").mouseover(function(){
$("#img13").css("width","400");
});
$("#img13").mouseout(function(){
$("#img13").css("width","200");
});
});
</script>
</head>
<body>
<!--Buttons and Landing page logic-->
<center>
<table border=0 id="WelcomeTable" style="display:none; float:center;">
<td width=350>
<!--<p id="Title" style="display:none; font-size:70; line-height:55%; margin:2%">Jayson Bernard</p>-->
<img id="Title" style="display:none; margin:2%" src="images/jbLogo.png"/>
<br>
<table border=0>
<td width=350 height=50>
<button id="HomeBt" style="height:50; width:60; display:none;">Home</button>
<button id="ReelBt" style="height:50; width:60; display:none;">Reel</button>
<button id="ResumeBt" style="height:50; width:70; display:none;">Resume</button>
<button id="PhotosBt" style="height:50; width:60; display:none;">Photos</button>
<button id="ContactBt" style="height:50; width:70; display:none;">Contact</button>
</td>
</table>
</td>
<td>
<img style="display:none; line-height:70%;" id="WelcomeImage" src="images/landingPageImg.png" height=800 >
</td>
</table>
<p id="Count" style="font-size:150; margin:10% 45%; display:none;"></p>
</center>
<!--END-->
<!--BEGINING-->
<center>
<table style="display:none;" id="ReelPage" class="content">
<tr>
<td>
<h1>Reel</h1>
</td>
</tr>
<tr>
<td>
<iframe width="560" height="315" src="http://www.youtube.com/embed/Hgc0FBJEZr4?rel=0" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="http://www.youtube.com/embed/ZfsoW2YY9o8?rel=0" frameborder="0" allowfullscreen></iframe>
</td>
</tr>
<tr>
<td>
<iframe width="560" height="315" src="http://www.youtube.com/embed/uJO5O78qx54?rel=0" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="http://www.youtube.com/embed/gr0zfqVa0CM?rel=0" frameborder="0" allowfullscreen></iframe>
</td>
</tr>
</table>
</center>
<!--END-->
<!--BEGINING-->
<center>
<table style="display:none;" id="ResumePage" class="content">
<td width=600>
<h1>Resume</h1>
<p>Hair: Brown<br/>
Eyes: Blue<br/>
Height: 6'1"<br/>
Weight: 190 lbs<br/>
<br/>
FILM CHARACTER DIRECTOR<br/>
"The Landlord" "QVC Host" By: Emile Hyde<br/>
" D.I.N.K.'s" " Charles" By: Robert Alaniz<br/>
" An Unfortunate Idea" "The Clown" By: Nick Scala<br/>
" ILL WILL" "Chris" By: T.A. Jones<br/>
" XYRESIN" "Luke" By: Rice Omary<br/>
<br/>
TELEVISION<br/>
"Taking the Lunge" Reality show (me) Pesent<br/>
" Chicago Fire" "First basemen" 2012<br/>
"Underemployed" "Protective Father" 2011<br/>
"Turks" "Leather clad guy" 1999<br/>
"ER" "School teacher" 1998<br/>
<br/>
COMMERCIALS<br/>
"Green Landscaping" " Satisfied customer" 2011<br/>
" The Civil Rights Agenda" "Spokesman" 2011<br/>
<br/>
TRAINING<br/>
Act One Studio Scene Study/ Advanced O'Brian<br/>
Second City Classes A-D & Writing Upon Request<br/>
Marybeth Liss (Red Twist) Acting Coach/Vocal trainer Marybeth Liss<br/>
<br/>
SPECIAL SKILLS<br/>
Stand up Comedian and Writer.<br/>
Improv Skills and Comedic Timing.<br/>
Training in Judo.<br/>
Broad sword trained.</p>
</td>
</table>
<center>
<!--END-->
<!--BEGINING-->
<table style="display:none;" id="PhotosPage" class="content">
<td width=600>
<h1>Photos</h1>
<table>
<tr>
<td>
<img id="img3" src="photos/3.jpg" width="200"/>
<img id="img4" src="photos/4.jpg" width="200"/>
<img id="img1" src="photos/1.jpg" width="200"/>
<img id="img2" src="photos/2.jpg" width="200"/>
<img id="img7" src="photos/7.jpg" width="200"/>
<img id="img10" src="photos/10.jpg" width="200"/>
<img id="img11" src="photos/11.jpg" width="200"/>
</td>
<td>
<img id="img5" src="photos/5.jpg" width="200"/>
<img id="img6" src="photos/6.jpg" width="200"/>
<img id="img8" src="photos/8.jpg" width="200"/>
<img id="img9" src="photos/9.jpg" width="200"/>
<img id="img12" src="photos/12.jpg" width="200"/>
<img id="img13" src="photos/13.jpg" width="200"/>
</td>
</tr>
</table>
</td>
</table>
<!--END-->
<!--BEGINING-->
<center>
<table style="display:none;" id="ContactPage" class="content">
<tr>
<td>
<h1>Contact</h1>
</td>
</tr>
<tr>
<td>
<a class="twitter-timeline" data-dnt="true" href="https://twitter.com/MrJayBernard" data-widget-id="319617825352323072">Tweets by @MrJayBernard</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</td>
<td valign="top">
<table>
<tr>
<td>
<a href="http://www.imdb.com/name/nm3981346/" target=_blank border="0"><img src="images/imdblogo.jpg" width=100 height=100 border="0"/></a>
</td>
<td>
<a href="https://www.facebook.com/jayson.bernard1" target=_blank border="0"><img src="images/facebook_icon.png" width=100 height=100 border="0"/></a>
</td>
</tr>
</table>
<form >
Send me a message!
<br/>
<textarea cols=30 rows=1>Subject</textarea>
<br/>
<textarea cols=30 rows=10>Content</textarea>
<br/>
<button id="submit" style="width:265;">Send</button>
</form>
</td>
</tr>
</table>
</center>
<!--END-->
</body>
</html>
任何见解都会受到重视。
答案 0 :(得分：4)
我会努力降低代码的复杂性。想想它的部分内容 - 你有一个倒计时器的部分，一个隐藏计时器并显示按钮的部分，甚至可能是控制每个按钮显示延迟的部分。
通过降低复杂性并提高可读性，您可以更轻松地在各种浏览器和环境中对代码进行故障排除。至于iframe没有与其容器一起隐藏this seems to have been asked once before。
考虑以下内容，可在http://jsfiddle.net/jonathansampson/9B39g/上查看：
// Important references
var countdn = $("#countdown"),
buttons = $("#buttons a"),
seconds = 5;
// Interval to handle the countdown
var cInterval = setInterval(function () {
countdn.fadeOut(250, reduceNum);
}, 1000);
// Logic responsible for the countdown
function reduceNum () {
if ( --seconds ) {
$(this).text(seconds).fadeIn(250);
} else {
clearInterval(cInterval);
transitionLayout();
}
}
// Logic to reveal our buttons when the time is right
function revealButtons () {
buttons.each(function (index) {
$(this).delay(index * 500).animate({ opacity: 1 }, 1000);
});
}
// Logic to handle the transition
function transitionLayout () {
countdn.remove();
revealButtons();
}