如何使用相同的“按鈕”緊接着執行兩個不同的jQuery動畫？

Question

當我按下按鈕時，我動畫我的.header_inner向下移動。 但是當我再次按下按鈕或向上移動動畫時，如何讓它回到原來的位置？

碼：

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

當我再次按下按鈕時，我希望我的.header_inner再次回到.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);