1
MacではSafari以外のブラウザでも動作するjQueryテキストアニメーションがあります。誰かが私が間違っていることを教えてもらえますか？私はバックグラウンドで固定画像を含むとサファリでの作業をやめたようです。ここで私のhtml、css、およびクエリです。SafariでJqueryアニメーションが機能しない
の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>
すみません。私はその説明の中にテキストの入った箱を掲示しました。テキストをアニメーション化するのを止めたのは、バックグラウンドに置いた固定画像のようでした。背景に固定画像を含むhtmlパーツにすべてを含めました。 – user830593
私はあなたのjqueryコードdoesntの仕事がちょうど知っていない何かでなければならないという手掛かりを持っていません..しかし、私のところはまだそこのコードのすべてで動作するようです。 – Joonas