如何使用相同的＆＃34;按钮＆＃34;来执行两个不同的jQuery动画？

Question

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

代码：

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

当我再次按下按钮时，我希望我的.header_inner再次为其设置动画。

Answer 1

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

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

Answer 2

相同但没有全局变量：

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