.css("transform") returns 意外值矩阵(1, 0, 0, 1, 0, 2000) 而不是 translateY(2000px)

Question

jQuery 函数假设在单击“#ring”时上下变换“.circle1”div，但不幸的是，它没有发挥作用。我似乎无法发现任何错误，因此不胜感激。感谢您的指导。

//..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 1

使用 jQuery.css() 检查 transform 属性不会 return 您期望的结果。而不是 translateY(2000px) 它 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>

除此之外，当你想用 jQuery 设置 css 属性时，可以是

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

或

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

但不是

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

用于设置 css 值。

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

.css("transform") returns 意外值矩阵(1, 0, 0, 1, 0, 2000) 而不是 translateY(2000px)

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

javascript

jquery

jquery-click-event

css-transitions

css-transforms