0

I'm designing a static HTML page. It has two input fields and a change button.

<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>

What i wanted to do is, when clicking the change button, the value in text field should swap mean while the text box should move visually to another box position. so i've included css3 animation, javascript as follows

css3

.animation {
    position: relative;
    animation: swap .5s;
    -moz-animation:swap .5s; /* Firefox */
    -webkit-animation:swap 1s; /* Safari and Chrome */
}


@-moz-keyframes swap /* Firefox */
{
    0%   {left:0%; top:0%;}
    100% {left:50%; top:0%;}
}

@-webkit-keyframes swap /* Chrome and Safari */
{
    0%   {left:0%; top:0%;}
    100% {left:50%; top:0%;}
}


.animationOne {
   position: relative;
   animation: swapOne .5s;
   -moz-animation:swapOne .5s; /* Firefox */
   -webkit-animation:swapOne .5s; /* Safari and Chrome */ 
}

 @-moz-keyframes swapOne /* Firefox */
{
    0%   {right:0%; top:0%;}
    100% {right:48%; top:0%;}
}

 @-webkit-keyframes swapOne  /* Chrome and Safari */
{
    0%   {right:0%; top:0%;}
    100% {right:48%; top:0%;}
}

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;   
}

The text boxes are animating well as expected. But text box values are disappeared after the animation is done. Could some one help me...

4

1 回答 1

0

上述项目的问题与<form>, <input type="img">

由于文本框、图像按钮<input type="image" src="images/SwitchMode.png">包含在 中，因此它会发布值。所以页面刷新，数据不可用。

我使用了以下代码而不是<input type="image" src="images/SwitchMode.png">它，它可以工作。

 <img src="images/SwitchMode.png" alt="Change" 
    class="centerButton" id="changeButton" 
    onclick="change()" value="change" />
于 2012-04-26T12:23:59.587 回答