jquery - 单击按钮时动画 marginTop

Question

我是一个 Jquery 新手，我正在尝试通过在 #advBtn 被点击。

到目前为止，这是我的代码。

它动画向下但不向上。

$(document).ready(function(){
  $("#advBtn").click(function(){

    if($('.content').css({ marginTop: '0vh'})) {
    $(".content").animate({ marginTop: '10vh'}, 1000);
    }else{
      $(".content").animate({ marginTop: '0vh'}, 1000);
    };
  });
});

有人可以就此给我建议吗？

Answer 1

1. 在 marginTop 不是 margin-top 时使用
2. 检查 px 而不是 vh

$(document).ready(function(){
  $("#advBtn").click(function(){
    if( $('.content').css('marginTop') == '0px' ) {
    $(".content").animate({ marginTop: '10vh'}, 1000);
    }else{
      $(".content").animate({ marginTop: '0vh'}, 1000);
    };
  });
});

.content{
margin-top: 0vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">content<div>
<button id="advBtn">animate</button>