Lord Eww Lel Lord Eww Lel - 1 year ago 45
Javascript Question

.css("transform") returns unexpected value matrix(1, 0, 0, 1, 0, 2000) instead of translateY(2000px)

The jQuery function is suppose to transform the ".circle1" div up and down upon clicking "#ring" but unfortunately, it is not functioning. I can't seem to spot any errors so any help is appreciated. Thank you for your guidance.

//..HTML..//

<div class="circle1"><li class="products"><a href="#">Products</a></li></div>
<a><img id="ring" src="New Assets/ring5.png" alt=""></a>

//..CSS..//

.circle1 {
width: 80px;
height: 80px;
border-radius: 50%;
background: #BBBBBB;
transform: translateY(2000px);
}

#ring {
background-size: contain;
width: 50px;
position: relative;
top: 5px;
}

//..jQuery..//

<script>
$(document).ready(function() {
$('#ring').click(function() {
if ($('.circle1').css('transform') == 'translateY(2000px)')
$('.circle1').css('transform':'translateY(400px)');
else {
$('.circle1').css('transform':'translateY(2000px)');
};
});
});
</script>

Answer Source

Checking transform property with jQuery.css() does not return the result you are expecting. Instead of translateY(2000px) it returns

matrix(1, 0, 0, 1, 0, 2000)

$(document).ready(function() {
  var $circle1 = $('.circle1');
  $('#ring').on("click", function() {
    console.log($circle1.css("transform"));
    if ($circle1.css('transform') == 'translateY(2000px)') {
      $circle1.css('transform', 'translateY(400px)');
    }
    else {
      $circle1.css('transform','translateY(2000px)');
    };
  });
});
.circle1 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #BBBBBB;
  transform: translateY(2000px);
}
#ring {
  background-size: contain;
  width: 50px;
  position: relative;
  top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="circle1">
  <li class="products"><a href="#">Products</a></li>
</ul>
<button id="ring">#ring</button>

Apart from that, when you want to set a css property with jQuery, it's either

.css('transform', 'translateY(400px)')

or

.css({ 'transform': 'translateY(400px)' })

but not

.css('transform':'translateY(400px)')

for setting css values.

https://api.jquery.com/css/#css2