CODEWITHSUNDEEP
jquerycssanimationrotation
HovSky
HovSky

Reputation: 49

Jquery multiple unwanted rotation

I have a problem with my code. I have multiple blocks on my page, and i want each block to rotate separately of the other block. This jQuery code manages that, but also updates variable "rotation" so the next block rotates for 180 + 180*n ('n' = times current block rotated)

I presume that the problem lies within variable rotation, but don't know any workaround.

var rotation = 0;
jQuery.fn.rotate = function(degrees) {
  $(this).css({
    'transform': 'rotate(' + degrees + 'deg)'
  });
};

$('.strijela').click(function() {
  rotation += 180;
  $(this).rotate(rotation);
});
.strijela {
  transition: 0.3s linear;
  background-color: black;
  color: white;
  height: 150px;
  width: 150px;
  margin: 20px auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="strijela">this should rotate once when clicked</div>
<div class="strijela">this should also rotate when clicked but only once.</div>

<p>
  problem is, the more you click on first block, second block will rotate that much more times and vice versa. I know it is because of the variable "rotation", but don't know how to solve that problem. Thank you.
</p>

In conclusion, I need 'n' separate blocks that will spin for only 180°, not for 180*n

http://jsfiddle.net/Lbq3K/3/

Upvotes: 1

Views: 71

Answers (2)

Bhuwan
Bhuwan

Reputation: 16855

Another solution is you can use the click count on the element using data-click attribute and attr() jQuery.

Stack Snippet

$("div").attr("data-click", 0);
$("div").on("click", function() {
  var click = $(this).attr("data-click");
  click++;
  $(this).attr("data-click", click);
  $(this).css({
    "transform": "rotate(" + 180 * click + "deg)"
  });
});
div {
  width: 100px;
  height: 100px;
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease;
}

div:after {
  content: attr(data-click);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<br>
<div></div>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337570

The problem is because you're incrementing the global rotation variable, so the rotation of any subsequent click on any element is multiplied by the number of previous clicks.

To fix this you could associate a rotation value on a per-element basis using a data attribute, like this:

$.fn.rotate = function(degrees) {
  return $(this).css({
    'transform': 'rotate(' + degrees + 'deg)'
  });
};

$('.strijela').click(function() {
  var rotation = $(this).data('rotation') || 0;
  rotation += 180;
  $(this).rotate(rotation).data('rotation', rotation)
});
.strijela {
  transition: 0.3s linear;
  background-color: black;
  color: white;
  height: 150px;
  width: 150px;
  margin: 20px auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="strijela">this should rotate once when clicked</div>
<div class="strijela">this should also rotate when clicked but only once.</div>

Also note that I added a return statement to your $.rotate plugin so that you can continue to chain methods from the response.

Upvotes: 3

Related Questions