移動文本框動畫

我正在設計一個靜態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>

我想要做的是，當點擊更改按鈕時，文本框中的值應該交換平均值，而文本框應該可視地移動到另一個框位置。所以我已經包括CSS3動畫的JavaScript如下

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

的文本框設置動畫以及預期。但是動畫完成後，文本框的值就會消失。能有人幫我...

來源

2012-04-25 Tamilselvan

爲那個創建了一個[fiddle]（http://jsfiddle.net/6Ln8Z/）...對我來說它在Chrome中工作...你是否在不同的瀏覽器中檢查過它？還有其他什麼可以對價值做些什麼嗎？ – 2012-04-25 13:19:16

的問題與上述項目與<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-26 12:23:59 Tamilselvan

移動文本框動畫

回答

相關問題