Анимируйте объекты, используя jQuery. Как я могу использовать три метода: fadeIn, animate и fadeOut в HTML

Question

Вот мой HTML КОД:

$(document).ready(function() {
  var img = $('#img');
  $("#start").click(function() {
    img.fadeIn(1000, function() {
      img.animate({
        left: $(window).width() - 400
      }, 3000, function() {
        img.animate({
          left: '0px'
        }, 3000, function() {
          img.fadeOut(1000);
        })
      });
    });
  });
});

.img {
  width: 400px;
  height: 100px;
  /* background-color: red; */
  position: absolute;
  top: 50px;
  left: 0;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="start">Start</button>
<div>
  <img id="img" src="guy-walking.gif" width="400" />
</div>

Как я могу повернуть парня (gif), чтобы он шел вперед по экрану вперед? Когда парень движется обратно к начальной точке, то есть справа налево, это будет выглядеть так, будто он идет по Луне. И я не могу повернуть его и заставить его идти вперед. Пожалуйста, помогите !!!

Answer 1

Вы можете использовать свойство CSS 'scaleX, чтобы перевернуть изображение.

transform: scaleX(-1);

В приведенном ниже примере я создал класс с именем "back" и просто добавляю класс при анимации нужно перевернуть.

Имейте в виду, что в моем примере моя анимационная картинка шла справа налево. Вот почему я перевернул изображение с самого начала и «развернул» его, когда оно достигло правого края. Вам придется поменять свойства scaleX, если ваша анимация слева направо.

$(document).ready(function() {
  var img = $('#img');
  $("#start").click(function() {
    img.fadeIn(1000, function() {
      img.animate({
        left: $(window).width() - 400
      }, 3000, function() {
      	img.addClass('back');
        img.animate({
          left: '0px'
        }, 3000, function() {
          img.fadeOut(1000);
        })
      });
    });
  });
});

#img {
  width: 400px;
  height: 400px;
  position: absolute;
  top: 50px;
  left: 0;
  display: none;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

#img.back {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="start">Start</button>
<div >
  <img id="img" src="https://media0.giphy.com/media/XGnWMiVXL87Xa/source.gif" width="400" />
</div>