Невозможно анимировать мой div с остатком поля

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

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 secondes, если это возможно]

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

источник

2016-10-19 J.Aurélien

Прежде всего, ваш код не был запущен на 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>

источник

2016-10-19 10:02:13 Stewartside

Хорошо, спасибо! теперь анимационная работа! –

Могу ли я спросить, какую функцию использовать, если я хочу, чтобы div уходил в 5 раз слева (например), а затем возвращался с первого поля? –

ой, нет больше вопросов, с изменениями мой старый код работает для этого, спасибо –

Используйте расслоение плотной 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>

источник

2016-10-19 09:59:41 Suraj

Если вы читали его код, вы увидите JQuery уже загружен. – Stewartside

Его работа для меня, когда я удаляю http://code.jquery.com/jquery-1.9.0rc1.js, и использую https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery. min.js – Suraj

Невозможно анимировать мой div с остатком поля

ответ

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