Бесконечное перемещение через jquery animate

192
15 июля 2018, 16:40

Нужно сделать так чтобы тайловое изображение внутри блока перемещалось бесконечно.

$(document).ready(function () {
    $('#intro').animate({backgroundPositionX: 'эта величина должна увеличивать бесконечно'}, 40000,'linear');
})
Answer 1

У animate есть callback, можно использовать его как-то так. Использую для наглядности свойство margin-left

$(function() { 
   Animation (); 
}) 
 
function Animation () { 
   $('#intro').animate({marginLeft: parseInt($('#intro').css("marginLeft"))+1+"px"}, 10,'linear', Animation); 
}
#intro { 
  border: 2px solid red; 
  width: 20px; 
  height: 20px; 
   
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="intro"></div>

Answer 2

Вроде как jQuery не поддерживает анимацию backgroundPosition. Может в новых версиях уже работает... Я использую jQuery Background Position: http://keith-wood.name/backgroundPos.html Можно сделать что-то вроде такого:

    $(#intro).animate({backgroundPosition: '+=1% +=1%'}, 40000);

Выставите большее время, тогда будет «бесконечность». :-)

Answer 3

$(document).ready(function() { 
  var x = 0; 
  setInterval(function() { 
    $('#intro').animate({ 
      backgroundPositionX: x + 'px' 
    }, 100, 'linear'); 
    x++; 
  }, 400); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

READ ALSO
Не открывается информационное окно в Google Maps API

Не открывается информационное окно в Google Maps API

Не могу понять почему не открывается, окно при нажатии на маркер

176
Как работать с txt файлом как с массивом?

Как работать с txt файлом как с массивом?

Есть текстовый файл, в нём хранятся данные в таком формате:

217
Блок в компоненте родителя не видит ширины дочерних блоков выводимых внутри него

Блок в компоненте родителя не видит ширины дочерних блоков выводимых внутри него

В корневом компоненте app-component расположен header с несколькими ссылками для перехода по роутам, которые выводятся тут-же ниже в router-outletСтраницы,...

166
requestAnimationFrame, не получается зациклить

requestAnimationFrame, не получается зациклить

Модернизирую найденный кодВ оригинале клочья тумана проходят снизу вверх по canvas, и исчезают

192