Получение ошибки анимации jQuery

Question

Я пытаюсь сделать текст, чтобы перейти вправо (он должен появиться из левой части монитора и перейти вправо к определенному праву (я должен установить его). Вот моя проблема, .animate функция просто не работает для меня, я попытался так много раз, но ничего Вот код:..

  <div id="text"> 
     Text 
     </div> 

#text { 
width: 700px; 
color: black; 
text-decoration: dashed;} 

$(document).ready(function() { 
$('#text').animate({ right: "200px" }, 1500);}); 

http://jsfiddle.net/8opmde4p/

Помогите мне, пожалуйста, спасибо

Answer 1

свойство right ничего не делает.. потому что #text использует значение по умолчанию для position property: static. Попробуйте использовать position: absolute. В вашем JS right должен быть left, потому что вы его перемещаете 200pxот Слева.

$(document).ready(function() { 
 
    $('#text').animate({ left: "200px" }, 1500); 
 
});

#text { 
 
    position: absolute; 
 
    left: 0; 
 
    width: 700px; 
 
    color: black; 
 
    text-decoration: dashed; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="text">Text</div>

Fiddle: http://jsfiddle.net/ypnyvezx/

---

Если вы не хотите, чтобы добавить для изменения потока с помощью position: absolute, используйте padding-left вместо:

$(document).ready(function() { 
 
    $('#text').animate({ paddingLeft: "200px" }, 1500); 
 
});

#text { 
 
    width: 700px; 
 
    color: black; 
 
    text-decoration: dashed; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="text">Text</div>

Answer 2

#text имеет position: static по умолчанию, и поэтому установка right ничего не меняет. Он применяется только к элементам, которые имеют position: absolute.

Если вы хотите переместить его влево, попробуйте увеличить margin-left.

JSFiddle, и код ниже:

$('#text').animate({ "margin-left": "200px" }, 1500); 

Вы знаете, как отлаживать JavaScript? Как Dhaval Marthak по праву pointed out, вы также забыли включить jQuery в свой JSFiddle. Попробуйте открыть консоль (F12 в большинстве браузеров) и искать ошибки в вашем оригинале. В моем случае он сказал "$ is not defined". Вот как я узнал, что вы забыли загрузить jQuery.