Question

我正在尝试在文档加载时将框从右向左移动50px。我做了很多搜索，我很难过。

起初我觉得这很容易做到，而且我将不再将点击事件编入其中以获得乐趣，但在这里我被卡住了。

这是HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />

    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
    Remove this if you use the .htaccess -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <link rel="stylesheet" href="css/gameCSS.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
    <meta name="apple-mobile-web-app-capable" content="yes" /> 

    <link rel="apple-touch-icon" href="media/apple-touch-icon.png"/>
    <link href="media/apple-touch-startup-image-iphone.png" media="(device-width: 320px)" rel="apple-touch-startup-image"/>
    <link href="media/apple-touch-startup-image-iphone-retina.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"/>

    <script src="js/jgame.js"></script>

    <title>HTML</title>
    <meta name="description" content="" />
    <meta name="author" content="CREEE" />



</head>

<body>
    <div id="home" data-role="page">

    <div id="box">

    </div>


    <div id="obs">

    </div>


    </div>


</body>

这是我的CSS

#box {

width: 40px;
height: 40px;

background-color: blue;

margin: 1px;
top:10px;
position:absolute;}

#obs {width: 15px;
height: 15px;
border: solid, 2px;
background-color: red;}

这是我的jQuery

$(document).ready(function() {   
$('#box').animate({left: "+=50px",'slow'}, 1000);
});

Answer 1

试试这个：

$('#box').animate({left: "+=50px"}, 1000);

删除'slow'。 checkout the fiddle here

I am trying to move the box from right to left, by 50px when the Document loads.
此评论不正确您的代码会将#box移至left to right by 50px

jQuery.animate很难从右到左移动div

1 个答案: