Question

我是一名Jquery新手，我想通过单击.content来更改margin-top来为#advBtn div设置动画。

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

动画向下但不向上。

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

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

有人可以建议我吗？

Answer 1

如果marginTop不是margin-top，请使用
使用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>

Answer 2

尝试使用此代码解决您的问题。

jQuery代码：

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

var style = window.getComputedStyle(document.getElementById('content'));
var marginTop = style.getPropertyValue('margin-top'); 
alert(marginTop);

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

HTML代码：

<div class='content' id='content'>This is test content </div>

<input type='button' id='advBtn' value='click'>

动画边距顶部单击按钮

2 个答案: