Не могу оживить мой div с оставленным полем

Question

Я хочу иметь анимацию с таймером, который прокручивает мой div с оставленным полем, но у меня даже не может быть правильной анимации, когда я пытаюсь зайти на свой веб-сайт, он просто мгновенно получает "-margin" и в тесте ничего, Даже не могу получить анимацию, когда я копирую / вставляю рабочий код. Я не понимаю Вот мой код:

HTML:

<div id="twitter">
  <img style="width:50px;height:50px;" src="mypicture">
  <img id="next_tweet" src="mypicture">
  <img id="next_tweet" src="mypicture">

</div>
<script src="http://code.jquery.com/jquery-1.9.0rc1.js"></script>

CSS:

#twitter {
  width: 1000%;
  padding: 95px 0 0 400px;
  margin-left: 0px;
  height: 220px;
  -webkit-transition-delay: 2s;
  /* Safari */
  transition-delay: 2s;
}

#next_tweet {
  margin-left: 65px;
  width: 50px;
  height: 50px;
}

JavaScript:

jQuery(document).ready(

  function(){
            jQuery('#twitter').animate({
                marginLeft : "-1060px"
            },1000);

});

https://jsfiddle.net/sqs7btcx/1/

[просто хочу, чтобы мой div шел справа налево, все 5 секунд, если это возможно]

если кто-то может мне помочь, спасибо

Answer 1

Прежде всего, ваш код не был запущен на JSFiddle, потому что он требует https запрос к внешним файлам.

Во-вторых, ваш CSS имеет задержку перехода, из-за которой ваша функция анимации работала некорректно.

JSFiddle

$(document).ready(function() {
    $('#twitter').animate({
      marginLeft: "-=115px"
    }, 5000);
  });

#twitter {
  width: 1000%;
  padding: 95px 0 0 400px;
  margin-left: 0px;
  height: 220px;
}

#next_tweet {
  margin-left: 65px;
  width: 50px;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="twitter">
  <img style="width:50px;height:50px;" src="http://image.noelshack.com/fichiers/2015/10/1425504302-kancolle-9.png">
  <img id="next_tweet" src="http://image.noelshack.com/fichiers/2015/10/1425504302-kancolle-9.png">
  <img id="next_tweet" src="http://image.noelshack.com/fichiers/2015/10/1425504302-kancolle-9.png">
  <img id="next_tweet" src="http://image.noelshack.com/fichiers/2015/10/1425504302-kancolle-9.png">
  <img id="next_tweet" src="http://image.noelshack.com/fichiers/2015/10/1425504302-kancolle-9.png">
  <img id="next_tweet" src="http://image.noelshack.com/fichiers/2015/10/1425504302-kancolle-9.png">
</div>

Answer 2

Используйте js lib: https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
jQuery(document).ready(

  function(){
            jQuery('#twitter').animate({
                marginLeft : "-1060px"
            },1000);

});
</script>