Изменение текста перед сдвигом вверх

Я делаю слайдер с текстовой и фоновой анимацией, но приведенный ниже код сначала меняет текст, а тогда сдвигает его вверх.

Как мне решить эту проблему?

var index = 0;
var images = ["images/mainimage.jpg", "images/rampcustomers.jpg"];
var text1 = ["Connect all your devices and data bases", "Lorem ipsum dolor sit amet,"];
var text2 = ["Keep the efficiency managed and always up-to-date", "Lorem ipsum dolor sit amet"];

setInterval(function() {

  index++;
  if (index >= 2) {
    index = 0;
  }
  $('#container1').animate({
    opacity: 0.5
  }, 'slow', function() {
    $(this).css({
        'background-image': 'url(' + images[index] + ')'
      })
      .animate({
        opacity: 1
      });
  });

  $("#Fade").slideUp(1000);
  $("#text1").text(text1[index]);
  $("#text2").text(text2[index]);
  $("#Fade").slideDown(1000);



}, 4000);

Что за HTML? Каков именно ваш желаемый результат?

CertainPerformance 10.09.2018 10:30
Space-eye.com/index.html что-то в этом роде
owais latif 10.09.2018 10:32

@BhushanKawadkar, я сначала поднимаю его

owais latif 10.09.2018 10:33
2
3
65
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно использовать функция обратного вызова анимации:

 $("#Fade").slideUp(1000, function() {
     // this runs after the animation has completed
     $("#text1").text(text1[index]);
     $("#text2").text(text2[index]);
     $("#Fade").slideDown(1000);
 });

Другие вопросы по теме