Javascript 我如何使用相同的“jQuery”命令执行两个不同的jQuery动画；按钮“；？

按下按钮时，我会设置

.header\u inner

向下移动的动画。但是，当我再次按下按钮时，如何使其返回到其原始位置，或使其向上移动

代码：

$（'.handler'）。单击（函数（）{
$（'.header_inner'）。设置动画({
顶部：“-=-28%”，
}, 300);
});     

---

当我再次按下按钮时，我希望我的

.header\u inner

再次设置其返回方向的动画。

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

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

---

相同但没有全局变量：

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

---

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

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