Javascript 移动文本框动画

我正在设计一个静态HTML页面。它有两个输入字段和一个更改按钮

<form name="formTextBox" method="post">

    <span id="departImage"> 
        <img src="images/FlightImg.png"> 
    </span>

    <span class="spanInputOne" id="spanInputOneId">
        <input type="text" maxlength="5" 
            class="textBox" id="departTextBox" name="txtDpt" /> 
    </span>

    <input type="image" src="images/SwitchMode.png" 
        class="centerButton" id="changeButton" 
        onclick="change()" value="change" />

    <span id="arrveImage"> 
        <img src="images/FlightImgDown.png"> 
    </span>

    <span class="spanInputTwo" id="spanInputTwoId">
        <input type="text" maxlength="5" 
            class="textBox" id="arrivalTextBox" name="txtArr"/>
    </span>

</form>

Javascript

function change() {

    var depart=document.getElementById("departTextBox").value;
    var arrive=document.getElementById("arrivalTextBox").value;

    $("span:eq(1)").addClass("animation");
    $("span:eq(3)").addClass("animationOne");

    document.formTextBox.txtDpt.value = arrive;
    document.formTextBox.txtArr.value = depart;   
}

---

文本框的动画效果与预期一致。但在动画完成后，文本框值将消失。有人能帮我吗…

上述项目的问题与

由于文本框、图像按钮都包含在中，因此它会发布值。所以页面刷新，数据不可用

我使用了下面的代码，而不是，它是有效的

 <img src="images/SwitchMode.png" alt="Change" 
    class="centerButton" id="changeButton" 
    onclick="change()" value="change" />

为那一个创建了一个。。。对我来说，它是工作在铬。。。你在不同的浏览器中检查过了吗？还有什么其他的东西对这些值有影响吗？

 <img src="images/SwitchMode.png" alt="Change" 
    class="centerButton" id="changeButton" 
    onclick="change()" value="change" />