Safari浏览器不处理JQuery的权利，但在IE浏览器|铬|火狐工程就好了

我正在为我的兄弟在页面上工作。我主要使用Jquery和HTML来构建它。Safari浏览器不处理JQuery的权利，但在IE浏览器|铬|火狐工程就好了

我遇到的问题是IE浏览器和FireFox中的页面加载正常，但是当您在Safari中加载它时，它就会爆炸。你不能去卷轴链接，没有它全部分开。当你点击实物时，它应该展开4个视频。然后当你点击另一个按钮时，它应该关闭这些按钮并继续前进。然而，它只是让他们打开。这仅限于Safari Mind你。

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

任何有识之士都将aprreciated。

来源

2013-04-05 Anthony Russell

工作正常，我在Safari 5.1.7在Windows – 2013-04-05 01:53:44

你的jQuery似乎与video'的'的ID来寻找一个元素，但我不用这个ID在你的标记中看到任何东西。仅供参考，你可以做很多工作来优化这个jQuery。 – 2013-04-05 01:56:29

@DA。是的，我在一些调试中用ID视频标记了这些视频，试图解决这个问题，并忘记了这一点。另外我知道它需要严格的优化。我上周刚刚开始jQuery，所以我正在学习哈哈。随意指出可以在答案中使用更新的任何内容，并且病态上升。 – 2013-04-05 01:58:09

我会努力降低代码的复杂度。可以把它看成部分 - 你有一部分可以倒计时器，一个隐藏计时器并显示按钮的部分，甚至可以是控制每个按钮显示延迟的部分。

通过降低复杂性并提高可读性，您可以更轻松地解决各种浏览器和环境中的代码问题。至于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(); 
}

来源

2013-04-05 02:57:48 Sampson

我看到它的工作原理和代码有意义，除了它的启动。它如何知道启动柜台？我知道在我的代码中，我有$（document）.ready函数，告诉它在文档加载完成时启动。即使没有这个，代码是否会执行 – 2013-04-05 12:49:58

@AMR setInterval部分立即启动。如果你喜欢，你可以把它放在'document.ready'中。 – Sampson 2013-04-05 15:16:57

Ohhhhhh我错过了那个reduceNum函数调用。哇，做得非常好。 – 2013-04-05 15:35:44

Safari浏览器不处理JQuery的权利，但在IE浏览器|铬|火狐工程就好了

回答

相关问题