javascript - Javascript アニメーション下部

Question

JavaScriptのみを使用して（JQUERYなし）、ページの下部からdivを浮かせようとしています。

ここにフィドルがあります：http://jsfiddle.net/H7GSF/

一度上に移動しますが、「アニメーション」を作成するために反復しません。

HTML

<div id="block"></div>​

CSS

#block { position: fixed; background: red; width: 100px; height: 20px; bottom: 0; }​

JS

b = 0;
el = document.getElementById('block');
setInterval(function(){
    b+=10;
    el.setAttribute('style','bottom:'+(b)+'px;');
},20);​

Answer 1

の値を更新していないためですbottom。いつも10

これを試して、

b = 0;
el = document.getElementById('block');
setInterval(function(){
    b+=10;
    el.setAttribute('style','bottom:'+(b)+'px;');
},20);​

Answer 2

http://jsfiddle.net/H7GSF/1/を参照してください

使用するだけ

b = 0;
el = document.getElementById('block');
setInterval(function(){
    b+=10;
    el.setAttribute('style','bottom:'+b+'px;');
},20);

問題はそれbが一定だったということでした！

styleさらに、属性の代わりにプロパティを使用してスタイルを変更する方が良いと思いstyleます（そしてそれはより短いです）：

el.style.bottom=b+'px;'

styleまた、属性を使用する場合は、属性とプロパティの両方を使用して要素に追加された以前のスタイルを削除することに注意してくださいstyle。

Answer 3

どうぞ！ http://jsfiddle.net/thewebguy/H7GSF/2/

b変数を変更するだけです