javascript - 如何使用相同的 "button"紧接着执行两个不同的 jQuery 动画？

Question

当我按下按钮时，我为我的 .header_inner 设置动画以向下移动。但是，当我再次按下按钮或让它向上移动时如何让它回到原来的位置呢？

代码:

<script>
  $('.handler').click(function(){
    $('.header_inner').animate({
        top:"-=-28%",
    }, 300);
});     
</script>

我希望我的 .header_inner 在我再次按下按钮时以动画方式再次返回。

Answer 1

您可以创建一个 bool 变量来指示最后一次移动是向上还是向下:

var upwards = false,
    newTop;
$('.handler').click(function(){
    if (upwards) newTop = '28';
    else newTop = '-28';
    $('.header_inner').animate({
        top:"-=" + newTop + "%",
    }, 300);
    upwards = !upwards;
});