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属性不会返回您期望的结果。而不是translateY(2000px)它返回

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

＆＃13;

$(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)');
    };
  });
});

＆＃13;

.circle1 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #BBBBBB;
  transform: translateY(2000px);
}
#ring {
  background-size: contain;
  width: 50px;
  position: relative;
  top: 5px;
}

＆＃13;

<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>

＆＃13;

除此之外，当你想用jQuery设置一个css属性时，它还是

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

或

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

但不是

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

用于设置css值。

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

.css（“transform”）返回意外值矩阵（1,0,0,1,0,2000）而不是translateY（2000px）

1 个答案: