Jquery animation not working in Safari
I have a jQuery text animation that works in every other browser but Safari on the mac. Can someone tell me what I might be doing wrong? It seemed to stopped working in safari when I included a fixed image in the background. here is my html, css, and query.
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:blac开发者_如何学运维k;
}
#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>
http://jsfiddle.net/3Hfpj/ This should wait till the page is loaded until it starts running the animation..
$(window).load(function () {
$(".boxtext").delay(200).animate({bottom:"600px"},50000);
});
Works in safari.
Of course delay isnt necessary.. i just added it there as This page loads quite fast.. on a heavier website you might not want any delay for the animation.
And i have no idea whats wrong with your code as im just a big newbie when it comes to jquery :)
I've tried your code in safari on a mac and it seems to be working. it looks exactly the same as it does in chrome. firefox 5 doesn't show the white border and has the box positioned further up the page.
What version of safari are you using? And are you sure you don't have a plug-in which might be blocking javascript?
加载中,请稍侯......
精彩评论