2

我正在为我的兄弟制作一个页面。我主要使用 Jquery 和 HTML 来构建它。

我遇到的问题是页面在 IE Chrome 和 FireFox 中加载良好，但是当你在 Safari 中加载它时它会爆炸。如果不完全分开，您就无法访问卷轴链接。当你点击 reals 时，它应该展开 4 个视频。然后，当您单击另一个按钮时，它应该关闭这些按钮并继续前进。然而，它只是让它们打开。这仅在 Safari 中提醒您。

这是链接 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>

任何洞察力都会受到赞赏。

4

1 回答 1

4

我会努力降低代码的复杂性。分部分考虑——你有一个对计时器倒计时的部分，一个隐藏计时器并显示按钮的部分，甚至可能还有一个控制每个按钮显示延迟的部分。

通过降低复杂性并提高可读性，您可以更轻松地在各种浏览器和环境中对代码进行故障排除。至于 iframe 没有和他们的容器一起隐藏，这似乎已经被问过一次了。

考虑以下内容，可在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();
}
于 2013-04-05T02:57:48.390 回答