如何使用同一个按钮依次执行两个不同的jQuery动画？

Question

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

代码：

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

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

- belmin

Answer 1

你可以创建一个布尔变量，用于指示上一次的移动是向上还是向下：

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

- LostMyGlasses

Answer 2

没有全局变量的相同代码：

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

- RomanPerekhrest

---

是的，尽可能避免使用外部变量。 - Roamer-1888