CODEWITHSUNDEEP
jquerycsscss-transforms
Anett Barát
Anett Barát

Reputation: 89

How can I fix this rotating image issue in JQuery?

I have a narwhal that swims around and flips in the direction it's going. When it's clicked, it rotates 360 degrees, then continues swimming. But after rotating, it stops flipping in the direction it's going. How can I fix this?

var $narwhal = $('#narwhalId');
moveNarwhal($narwhal);

function moveNarwhal($narwhal) {
  var myX = Math.floor(Math.random() * ($(window).width() - $narwhal.width()))
  var myY = Math.floor(Math.random() * ($(window).height() - $narwhal.height()))
  if ($narwhal.offset().left < myX) {
    fishFlip($narwhal);
  } else fishFlipBack($narwhal);
  $narwhal.animate({
    top: myY,
    left: myX
  }, 4000, function() {
    moveNarwhal($narwhal);
  }).delay(500);
}

var tmpAnimation = 0;

$($narwhal).click(function() {
  $narwhal.stop(true);
  var element = $narwhal;
  tmpAnimation = tmpAnimation + 360;
  $({
    degrees: tmpAnimation - 360
  }).animate({
    degrees: tmpAnimation
  }, {
    duration: 1000,
    step: function(now) {
      element.css({
        transform: 'rotate(' + now + 'deg)'
      });
    }
  });
  moveNarwhal($narwhal);
});

function fishFlip(IdRef) {
  IdRef.addClass('flipped')
}

function fishFlipBack(IdRef) {
  IdRef.removeClass('flipped')
}
.flipped {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

#narwhalId {
  position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<img id="narwhalId" src="http://placekitten.com/100/100" />

Upvotes: 0

Views: 54

Answers (1)

Stewartside
Stewartside

Reputation: 20905

You need to check for and remove the transform if it exists inline on the element. To make sure the flipped state still keeps, its also advised to check and add the other flipped transform as an if into the rotate function

var $narwhal = $('#narwhalId');
moveNarwhal($narwhal);

function moveNarwhal($narwhal) {
  var myX = Math.floor(Math.random() * ($(window).width() - $narwhal.width()))
  var myY = Math.floor(Math.random() * ($(window).height() - $narwhal.height()))
  if ($narwhal.offset().left < myX) {
    fishFlip($narwhal);
  } else fishFlipBack($narwhal);
  $narwhal.animate({
    top: myY,
    left: myX
  }, 4000, function() {
    moveNarwhal($narwhal);
  }).delay(500);
}

var tmpAnimation = 0;

$($narwhal).click(function() {
  $narwhal.stop(true);
  var element = $narwhal;
  tmpAnimation = tmpAnimation + 360;
  $({
    degrees: tmpAnimation - 360
  }).animate({
    degrees: tmpAnimation
  }, {
    duration: 1000,
    step: function(now) {
      if(element.hasClass('flipped')) {
        element.css({
          transform: 'rotate(' + now + 'deg) scaleX(-1)'
        });
      } else {
        element.css({
          transform: 'rotate(' + now + 'deg)'
        });
      }
    }
  });
  moveNarwhal($narwhal);
});

function fishFlip(IdRef) {
  $narwhal.css('transform','');
  IdRef.addClass('flipped')
}

function fishFlipBack(IdRef) {
  IdRef.removeClass('flipped')
}
.flipped {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

#narwhalId {position:absolute;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<img id="narwhalId" src="http://placekitten.com/100/100" />

Upvotes: 2

Related Questions