Проблема с циклом jquery fadeIn () fadeOut () - PullRequest
Новая
       12

Проблема с циклом jquery fadeIn () fadeOut ()

0 голосов
/ 11 мая 2018

Я борюсь за то, чтобы этот цикл работал.

У меня есть два логотипа, оба по центру на целевой странице сайта, над которым я работаю.Я попытался закодировать цикл таким образом, когда одно изображение fadesOut(), другое fadesIn(), но оно не работает.

Я пробовал с setInterval(), но изображения начинают появляться одно поверх другого.Если я задерживаю одно изображение, оно запускает анимацию, когда другое заканчивается, что-то происходит с положением объекта, и оно отображается не по центру.

Вот мой код:

HTML

<div class="container">

      <div class="logocontainer">

        <img class="logo1" id="logoChange" src="_css/_images/UshuaiaLocals_Single.png" alt="logo">

        <img class="logo2" id="logoChange" src="_css/_images/UshuaiaLocals_Single_Coord.png" alt="logo">

  </div>

CSS 

.container{
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.logocontainer{
  display: block;
  height: 9rem;
  margin: 1rem;
}


.logo1{
  position: absolute;
  display: none;
  height: 9rem;
  margin: 1rem;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  }


 .logo2{
    position: absolute;
    display: none;
    height: 9rem;
    margin: 1rem;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    }

JQUERY 

$(document).ready(function() {

  function somethingfade(){

      $(".logo1").fadeIn(1000).delay(3000).fadeOut(1000);

      $(".logo2").delay(6500).fadeIn(1000).delay(3000).fadeOut(1000);

      $(".logo1").delay(7000).fadeIn(1000);

}

  somethingfade();
});

Спасибо!

1 Ответ

0 голосов
/ 11 мая 2018

fadeIn и fadeOut являются асинхронными функциями.Вам нужно использовать обратные вызовы, чтобы анимация выглядела синхронно: 

$(document).ready(function() {
  function somethingfade() {
    $(".logo1").fadeIn(1000, function() {
      $(this).delay(3000).fadeOut(1000, function() {
        $(".logo2").delay(6500).fadeIn(1000, function() {
          $(this).delay(3000).fadeOut(1000, function() {
            $(".logo1").delay(7000).fadeIn(1000);
          });
        })
      })
    });
  }

  somethingfade();
});
.container {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.logocontainer {
  display: block;
  height: 9rem;
  margin: 1rem;
}

.logo1 {
  position: absolute;
  display: none;
  height: 9rem;
  margin: 1rem;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.logo2 {
  position: absolute;
  display: none;
  height: 9rem;
  margin: 1rem;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="logocontainer">
    <img class="logo1" id="logoChange" src="_css/_images/UshuaiaLocals_Single.png" alt="logo 1">
    <img class="logo2" id="logoChange" src="_css/_images/UshuaiaLocals_Single_Coord.png" alt="logo 2">
  </div>
</div>
...