2011-07-07 32 views
1

不工作我有一個jQuery的文字動畫,在其他瀏覽器的工作原理,但Safari瀏覽器在Mac上。有人能告訴我我可能做錯了什麼嗎?當我在背景中包含固定圖像時,它似乎停止了在Safari中的工作。這裏是我的HTML,CSS和查詢。jQuery的動畫在Safari

JQUERY:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $(".boxtext").ready(function(){ 
     $(".boxtext").animate({bottom:"600px"},50000); 
    }); 
}); 
</script> 

HTML:

<body> 
    <div> 
     <img id="body" src="HomeIBSTVBG2.png"/> 
    </div> 
    <div class="container"> 
     <div class="logo"> 
      <img src="IB SportsTV Logo.png" width="240px" height="180px"/> 
     </div> 
     <div class="login"> 
      <form action='login.php' method='POST'> 
       Username: <input type='text' name='username'> 
       Password: <input type='password' name='password'> 
       <input type='submit' value='Log in'> 
      </form> 
     </div> 
     <div class="twitterfeed"> 
      <img src="twitter_feedIBSTV.png" width="500px" height="350px"/> 
      <div class="box"> 
       <p class="boxtext">Make picks, Be the Best!!! Make sports predictions, 
        compete with your friends and rise to the top of our leaderboards. Make 
        your mma fighting picks, NFL football picks, and any other sports you want! 
        Internet Broadcast Sports isn't just a picks game, but we are also a weekly 
        sports show that encourages you the viewer to give your opinion and make the 
        topics! You can submit comments, opinions and questions through twitter, our 
        Viewer Spot section, e-mail, and youtube! Now what are you waiting 
        for? Sign up NOW!!! 
       </p> 
      </div> 
     </div> 
     <p> 
     <div class="register"> 
      <form action='register.php' method='POST'> 
       <table class="text"> 
        <tr> 
         <td> 
          Your full name: 
         </td> 
         <td> 
          <input type='text' name='fullname' value=''> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          Choose a username: 
         </td> 
         <td> 
          <input type='text' name='username' value=''> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          Choose a password: 
         </td> 
         <td> 
          <input type='password' name='password'> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          Confirm Password: 
         </td> 
         <td> 
          <input type='password' name='password2'> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          Email: 
         </td> 
         <td> 
          <input type='text' name='email'> 
         </td> 
        </tr> 
       </table> 
       <p> 
        <input type='submit' name='submit' value='Register'> 
      </form> 
     </div> 
    </div> 
</body> 

CSS:

<style type="text/css"> 

@import url("reset.css"); 

html, body 
{ 
padding:0px; 
margin:0px; 
height:100%; 
width:100%; 
background-color:black; 
} 

#body 
{ 
padding:0px; 
margin:0px; 
width:100%; 
height:100%; 
overflow:hidden; 
position:fixed; 
top:0; 
left:0; 
} 

.container 
{ 
width: 73.2em; 
margin: 0 auto; 
position:relative; 
} 
.login 
{ 
position:absolute; 
top:50px; 
right:150px; 
color:white; 

font-family:trajan pro; 
} 
.register 
{ 
position:absolute; 
top:300px; 
right:150px; 
} 
.text 
{ 
color:white; 
font-size:20px; 
font-weight:bold; 
font-family:trajan pro; 
} 
.logo 
{ 
position:absolute; 
top:-20px; 
left:100px; 
} 
.box 
{ 
position:relative; 
top:-330px; 
left:15px; 
overflow:hidden; 
width:470px; 
height:310px; 
} 
.boxtext 
{ 
position:absolute; 
bottom:-300px; 
width:470px; 
height:310px; 
font-size:25px; 
font-family:trajan pro; 
color:white; 
} 
.twitterfeed 
{ 
position:absolute; 
top:240px; 
left:100px; 
} 

/*memberpage box properties*/ 
.gamebox 
{ 
position:absolute; 
top:150px; 
right:100px; 
} 
.leaderboardbox 
{ 
position:absolute; 
top:165px; 
left:100px; 
} 
.viewerspotbox 
{ 
position:absolute; 
top:370px; 
left:93px; 
} 


/*picks page properties*/ 
.mainform 
{ 
position:absolute; 
top:150px; 
left:100px; 
color:white; 
font-family:trajan pro; 
border:solid darkblue; 
background-color:blue; 
} 
.form2 
{ 
position:absolute; 
top:150px; 
right:400px; 
color:white; 
font-family:trajan pro; 
border:solid darkblue; 
} 
.form3 
{ 
position:absolute; 
top:500px; 
right:400px; 
color:white; 
font-family:trajan pro; 
border:solid darkblue; 
} 
.form4 
{ 
position:absolute; 
top:850px; 
right:400px; 
color:white; 
font-family:trajan pro; 
border:solid darkblue; 
} 
.form5 
{ 
position:absolute; 
top:1200px; 
right:400px; 
color:white; 
font-family:trajan pro; 
border:solid darkblue; 
} 
/*final picks page properties*/ 
#header 
{ 
position:absolute; 
left:0px; 
top:0px; 
color:white; 
} 

/*Leaderboard Table Properties*/ 
.tablehead 
{ 
color:white; 
font-family:trajan pro; 
background-color:blue; 
border-color:darkblue; 
} 
.tablecontents 
{ 
color:white; 
text-align:left; 
font-family:trajan pro; 
background-color:transparent; 
border-color:darkblue; 
} 
.tableposition 
{ 
position:absolute; 
top:250px; 
left:150px; 
} 
caption 
{ 
caption-side:bottom; 
color:white; 
font-size:42px; 
font-family:trajan pro; 
} 
/*teaser text*/ 
.teaser 
{ 
color:black; 
font-family:trajan pro; 
font-size:72px; 
position:absolute; 
left:450px; 
top:250px; 
} 

</style> 

回答

0

http://jsfiddle.net/3Hfpj/這應該等到頁面加載,直到它開始運行動畫..

$(window).load(function() { 
    $(".boxtext").delay(200).animate({bottom:"600px"},50000); 
}); 

作品在Safari。

當然延遲心不是必要的..我只是添加它作爲有此網頁加載相當快..你可能不想爲動畫任何延遲較重的網站。


,我已經不知道什麼是錯與您的代碼作爲即時通訊只是一個大的新手,當涉及到jQuery的:)

+0

對不起。我只在說明中貼出了帶有文字的框。什麼阻止了動畫文本似乎是我放在背景中的固定圖像。我將所有內容都包含在了html部分中,包括背景中的固定圖像。 – user830593

+0

我還沒有得到一個線索爲什麼你的jQuery代碼不工作必須是我不知道的東西..但我似乎仍然與所有的代碼在那裏工作。 – Joonas

0

我已經試過你的代碼在Safari在Mac上,它似乎是加工。它看起來和它在Chrome中完全一樣。 firefox 5不顯示白色邊框,並且該框位於頁面的更上方。

您正在使用什麼版本的Safari

?你確定你沒有插件可能阻止JavaScript?

+0

其實,鉻和Safari瀏覽器中的白色邊框是由於我沒有鏈接到的twitterfeed圖片。我已經放入了相同大小的佔位符圖片,現在在所有三種瀏覽器中都沒有區別。也許再次嘗試所有的Safari瀏覽器插件暫時禁用? – Ribena