Lord Eww Lel Lord Eww Lel - 20 days ago 6
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

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