javascript - JavaScriptは要素を移動しません

Question

変換 CSS を無効にするクリック可能なボックスを作成しようとしています。CSS を JavaScript で上書きしようとしていますが、機能していないようです。をクリックした後、左と下に少し移動するだけでいいと思い<a>ます<input>。

.bigbox {
border: 2px solid black;
border-radius:      20px;
background-color:   blue;
color:  white;
padding-left: 15px;
}
#closebigbox {
padding:    10px;
border: 2px solid black;
border-radius:      20px;
background-color:   blue;
color:  white;
font-size:  8px;
width:  25px;
text-align: left;
background-color:   silver;
}
.bigbox_submit{
padding:    3px;
border: 2px solid black;
border-radius:      20px;
background-color:   blue;
color:  white;
font-size:  12px;
width:  25px;
text-align: left;
background-color:   silver;
}

.bigbox{ 
 -moz-transition: all 0.5s ease-in-out; 
 } 
 .bigbox:focus { 
 background-color: #fc3; 
 -moz-transform: translate(125px,25px) scale(2); 
 }

---

<a href="javascript: document.getElementsByClassName('bigbox').style.position = 'relative'; document.getElementsByClassName('bigbox').style.left = '125px'; document.getElementsByClassName('bigbox').style.top = '25px';"  id="closebigbox" >Clear</a>

<form>
<input type="text"   class="bigbox" /><br/>
<input type="text"   class="bigbox" /><br/>
<input type="text"   class="bigbox" /><br/>
<a href="javascript:" class="bigbox_submit" >Submit</a>
</form>`

Answer 1

getElementsByClassName配列を返すため、すべての要素をループしてからスタイルを適用する必要があります。

var _elements = document.getElementsByClassName('bigbox');
for( var i = 0; i < _elements.length; i ++){
    _elements[i].style.position = 'relative'
    _elements[i].style.left= '125px'
    _elements[i].style.top= '25px'
}

Answer 2

このようなことをしてみてください

$('Foo').animate({right:2000px}).delay(3000).animate({left: '0px' });