Question

我有以下代码：

$('#button').click(function () { 
    $('#divName').animate({
        top: 90%,
    }, 1000, function(){
    });  
});

单击该按钮时，会将DIV的top属性设置为90％。

再次单击该按钮时，我将CSS恢复为原始状态（50％）。

我该怎么做？

我的尝试似乎可行，但看起来很混乱：

var state = false;

$('#button').click(function () { 
    if (state) {
        state = false;
        $('#divName').animate({
        top: '50%',
        }, 1000, function(){
      });
    } else if (state == false){
        state = false;
        $('#divName').animate({
        top: '90%',
       }, 1000, function(){
     });
    }
});

Answer 1

您可以使用CSS transitions完成此操作。使用jQuery，只需切换一个类即可。

$('#button').click(function () {
    $('#divName').toggleClass('animate');
});

.container {
  position: relative;
  height: 80vh;
  border: 2px solid red;
}

#divName {
  position: absolute;
  top: 50%;
  width: 100%;
  height: 50px;
  border: 2px solid blue;
  transition: top 1s linear;
}

.animate {
  top: 90% !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="button">Press</button>
<div class="container">
  <div id="divName"></div>
</div>

Answer 2

您可以通过一些小的改进来改善这一点：

var state = false;

$('#button').click(function() {
  percent = state ? 50 : 90
  $('#divName').animate({
    top: percent + '%',
  }, 1000, function() {});
  state = !state;
});

div {
  background-color: green;
  position: absolute;
  top: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p id="button">clickme</p>

<div id="divName">
  <p>hello</p>
</div>

Answer 3

这是一种删除jQuery添加的样式的方法

var div = $('#divName');
$('#button').click(function () {
  var style = div.attr("style");
  if(style && style.includes("top")){
    div.attr("style", style.replace(/top:[^;]+;/,""));
  }else{
    div.css("top", "90%");
  }
});

#divName{
  width: 20px;
  height: 20px;
  border: black solid 1px;
  position: absolute;
  top:50%; /*you need to give an init value to top*/
  transition: top 1s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<button id="button">click me</button>
<div id="divName"></div>

使用jquery切换CSS属性并对其进行动画处理

3 个答案: