Бесконечный цикл на анимации

Question

Бесконечный цикл на анимации

0

Мне нужен div, чтобы выскочить влево от экрана, и когда ширина сделана, он должен перезапустить. например, как его бег по кругу бесконечно.

Мне удалось найти это после поиска stackoverflow.

jQuery(".slide-inner").animate({left: -9913}, 80000, 'linear');

9913 - текущая ширина моего div в px. прямо сейчас он просто заканчивает ширину 9913, а затем завершает анимацию, ей нужно начинать заново, не показывая пробел, например, когда он попадает в последний пиксель в 9913 году, он должен начинаться с 1px снова и снова.

Мой html:

<div class="slide-inner">
<div class="one ani"></div>
<div class="two ani"></div>
<div class="three ani"></div>   
<div class="four ani"></div>
<div class="five ani"></div>
<div class="six ani"></div>
</div>

Игнорируйте элементы внутри.slide-inner. Это просто абсолютные позиции divs, которые я использую с css3, чтобы осветить слайдер в ключевых точках.

РЕДАКТИРОВАТЬ:

var animate = function() {
  $(".slide-inner").animate({left: -9913}, 80000, 'linear', function() {
  $(this).css('left', 1);
  animate();
 });
}
animate();

Проблема с приведенным выше кодом остается слева, 1) должен быть отзывчивым, поэтому я не могу положить туда -1920, а затем в браузере изменить размер не будет работать так, как должно быть?

user2810762 20 май 2014, в 15:14

Источник

2

Может быть, предоставление JSFiddle поможет
musefan 20 май 2014, в 12:55

Теги:

jquery

html

css

2 ответа

Ещё вопросы

Может быть, предоставление JSFiddle поможет

Jonathan Nicol · Answer 1 · 2014-05-20T10-29-00.000Z

2

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

var animate = function() {
  $(".slide-inner").animate({left: -9913}, 80000, 'linear', function() {
    $(this).css('left', 1);
    animate();
  });
}
animate();

Я собрал действительно основную скрипку, чтобы продемонстрировать эту технику: http://jsfiddle.net/6mfCx/

Jonathan Nicol 20 май 2014, в 10:29

0

Разве мы не получаем переполнения стека в JavaScript? Я никогда не изучал это прежде, если честно.
musefan 20 май 2014, в 12:57
0

@musefan Я не уверен, что ты имеешь в виду?
Jonathan Nicol 20 май 2014, в 13:04
0

Эй, код, который вы предоставили мне выше, работает, но сначала он показывает всю ширину родительского элемента div с белым фоном в конце анимации, затем начинается заново, я хочу, чтобы он выглядел так, как будто он никогда не заканчивается, поэтому в конце из 9913 первый пиксель должен начинаться снова в тот момент, когда он сначала скользит, например, ширина div на полноэкранном режиме составляет 1920px, прежде чем он начнется снова, он должен быть отзывчивым, поскольку родительский div в настоящее время установлен на 100% ширины.
user2810762 20 май 2014, в 13:07
0

Вы используете рекурсивную технику без каких-либо условий, чтобы сломать ее. animate звонки animate, которые звонят animate ... и на вечность, или пока браузер не сломается?
musefan 20 май 2014, в 13:07
0

@Musefan О, я понимаю тебя. Между каждой итерацией задержка составляет 8 секунд, поэтому я не вижу, чтобы она исчерпала память браузера.
Jonathan Nicol 20 май 2014, в 13:15
0

@ user2810762 Извините, мне трудно расшифровать этот комментарий! Мое решение делает то, что вы просили, а именно: «когда оно достигает конечного пикселя в 9913, оно должно начинаться с 1px снова и снова». Если вы хотите, чтобы анимация возобновлялась с позиции, отличной от левой: 1px, тогда вы можете просто изменить $ (this) .css ('left', 1); в моем коде другое значение.
Jonathan Nicol 20 май 2014, в 13:22
0

Я загрузил вам код в действии здесь: dreamsynk.com/rosewater. Спрыгивайте в галерею и наблюдайте, как в ее конце просто пробел. Я бы хотел, чтобы мне вообще не пришлось делать эту анимацию или этот слайдер. На мой взгляд, это выглядит некрасиво и портит мой дизайн, но клиент этого хочет. Дайте ему 5 минут, он все еще загружается.
user2810762 20 май 2014, в 13:26
0

Попробуйте сделать .slide-inner более широким, чтобы фоновое изображение имело место для повторения.
Jonathan Nicol 20 май 2014, в 13:41
0

Спасибо, М8, в два раза выше. Я хотел бы до вас, но мне нужно 15 представителей для этого.
user2810762 20 май 2014, в 13:59
0

Нет проблем. Вы должны принять мой ответ, и я получу репутацию за это. stackoverflow.com/help/someone-answers Сайт выглядит очень хорошо, кстати.
Jonathan Nicol 20 май 2014, в 14:25

Показать ещё 8 комментариев

demonofthemist · Answer 2 · 2014-05-20T12-26-00.000Z

Один из способов добиться этого - использовать background-image & background-repeat:repeat-x; для вашего div. Затем вы можете анимировать свойство background-position div и получить желаемый эффект.

Предположим, что ваша ширина div равна 1920px, затем анимация из background-position:0px 0px в background-position:-1920px 0px; ,

function animate() {
  $(".slide-inner").animate({'background-position':'0px -1920px'}, 80000, 'linear', function() {
    $(this).css('background-position','0px 0px');
    animate();
  });
}
animate();