2011-07-07 30 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