2013-03-06 2 views
1

Я пытаюсь переместить поле справа налево, на 50 пикселей при загрузке документа. Я сделал довольно много поисков, и я был в тупике.jQuery.animate с трудным перемещением div, справа налево

Сначала я подумал, что это будет легко сделать, и я собираюсь быть вдали от кодирования события щелчка в нем для удовольствия, но здесь я застрял.

Вот 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); 
}); 
+0

[вот] скрипка (http://jsfiddle.net/uJ7V5/3/) – OregonTrail

ответ

2

попробовать с этим один:

$('#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

+0

Спасибо за ответ. Я дернулся за титул, который ты прав. –

+0

Это решает проблему в скрипке, однако я думаю, что у меня проблема с привязкой. Потому что, когда я запускаю его локально, я не вижу результатов, даже если код правильный. Спасибо за помощь с кодом tho! –

+0

у вас отсутствует закрывающий '' тег, это опечатка или вы просто пропустили его при публикации. – Jai

Смежные вопросы