Question

我有一个jQuery文本动画，可以在所有其他浏览器中运行，但在Mac上运行Safari。谁能告诉我我可能做错了什么？当我在后台包含一张固定图像时，它似乎停止了在safari中工作。这是我的html，css和查询。

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>

Answer 1

http://jsfiddle.net/3Hfpj/这应该等到页面加载，直到它开始运行动画..

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

在野生动物园工作。

当然延迟不是必要的..我只是把它添加到那里因为这个页面加载速度很快..在一个较重的网站上你可能不希望动画有任何延迟。

我不知道你的代码有什么问题，因为我只是一个关于jquery的新手：）

Answer 2

我在Mac上的safari中尝试过你的代码，它似乎正在运行。它看起来和它在chrome中完全一样。 firefox 5不显示白色边框，并且盒子位于页面的上方。

您使用的是哪种版本的Safari？你确定你没有可能阻止javascript的插件吗？

Jquery动画在Safari中不起作用

2 个答案: