Последовательное отображение изображений с анимацией и задержкой (появление и прокрутка)

Я пытаюсь чередовать три изображения с этими эффектами:

  1. Задержка в одну секунду перед показом первого изображения
  2. Изображение № 1 отображается с эффектом плавного появления и скольжения вверх.
  3. Изображение № 1 отображается в течение 5 секунд, а затем исчезает.

[процесс повторяется после этого момента...]

  1. Задержка в одну секунду перед началом следующего изображения.
  2. Изображение № 2 отображается с тем же эффектом плавного появления и скольжения вверх, отображается в течение 5 секунд, исчезает ... и процесс повторяется для изображения № 3 и непрерывно повторяется в одном и том же шаблоне.

Вот что я сделал на данный момент: http://jsfiddle.net/27uy8/226/ runslide();

function runslide() {
 $('#pic1').fadeIn({queue: false, duration: 'slow'}).animate({ top: "-100px" }, 'slow').delay(3500).fadeOut(1500, function() {                  
    $('#pic2').fadeIn({queue: false, duration: 'slow'}).animate({ top: "-100px" }, 'slow').delay(3500).fadeOut(1500, function() {
            $('#pic3').fadeIn({queue: false, duration: 'slow'}).animate({ top: "-100px" }, 'slow').delay(3500).fadeOut(1500, function() {
            });
        });
    });
}

Я столкнулся с двумя проблемами:

1) когда слайд перезапускается, он теряет анимацию слайда вверх.

2) Я не знаю, как добавить пустую задержку в одну секунду перед запуском каждого изображения.

Я надеюсь, что кто-то здесь может мне помочь! Извините, если код не самый чистый, я впервые работаю с анимацией изображений.


javascript animation jquery fadein slideup
person naridi    schedule 04.01.2017    source источник
comment
Что касается позиции при втором выполнении, вы анимируете вершину до -100, но никогда не сбрасываете ее до нуля. Чтобы исправить сброс верхней части для фотографий до 0.   -  person Vanquished Wombat    schedule 04.01.2017
comment
Относительно начальной задержки: stackoverflow.com/questions/3583942/   -  person Vanquished Wombat    schedule 04.01.2017
comment
Я знаю, что вы уже приняли ответ. Я работал над другим типом решения. Это также может помочь вам. Использует анимацию CSS3 с Javascript. Вот ссылка - codepen.io/anon/pen/vgEOqX   -  person devtye    schedule 05.01.2017

Ответы (1)


arrow_upward
1
arrow_downward

Немного перепутал ваши тайминги, чтобы ускорить его. Важные моменты

 $('#pic1,#pic2,#pic3').css({top: 0})

сбросить позиции

и

 $('#pic1').delay(3500).fadeIn({queue: true, ....

для задержки старта/между повторами.

На основе вашего JSFiddle...

runslide();

function runslide() {
  $('#pic1,#pic2,#pic3').css({top: 0})
  $('#pic1').delay(3500).fadeIn({queue: true, duration: 'slow'}).animate({ top: "-100px" }, 'slow').delay(3500).fadeOut(1500, function() {       			
 			$('#pic2').fadeIn({queue: false, duration: 'slow'}).animate({ top: "-100px" }, 'slow').delay(3500).fadeOut(1500, function() {
       		$('#pic3').fadeIn({queue: false, duration: 'slow'}).animate({ top: "-100px" }, 'slow').delay(3500).fadeOut(1500, function() {
            runslide();
            });
        });
    });
}
#pics div {
  position: absolute;
  display: none;
}
#pics {
  position: absolute;
  top: 120px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pics">
  <div id="pic1">
    <img src="http://www.sbwebsitesolutions.com/wp-content/uploads/2014/02/step1blue-300x300.png">
  </div>
  <div id="pic2">
    <img src="http://www.sbwebsitesolutions.com/wp-content/uploads/2014/02/step2blue-300x300.png">
  </div>
  <div id="pic3">
    <img src="http://www.sbwebsitesolutions.com/wp-content/uploads/2014/02/step3blue-300x300.png">
  </div>
</div>

person Vanquished Wombat    schedule 04.01.2017
comment
Работает прекрасно, большое спасибо за помощь + обучение меня, как исправить проблемы, которые у меня были. Очень ценю! - person naridi; 05.01.2017