Jsのアニメーション幅W/O jqueryの

Question

iはタイトルに言ったように、IMは、JSと素子幅をアニメーション化しようとしている：

function floatMenu(rewidth){ 
if(rewidth.className == ''){ 
    rewidth.className = 'open'; x = rewidth.style.width; 
    x = x.slice(0, -2); 
    while(x < 190){ 
     x++; rewidth.style.width = x; 
    } 
} else { 
    rewidth.className = '';x = rewidth.style.width; 
    x = x.slice(0, -2); 
    while(x > 30){ 
     x--; rewidth.style.width = x; 
    } 
}; 

}

既にのsetTimeoutを試みました。答えを

のTy

それは段階的に増加していない、最後の値で終了。

Answer 1

あなたが機能を終了し、ブラウザに制御を返すまで、何もユーザーインターフェイスに変更されていないとしてあなたは、ループ内のスタイルを設定することで何かをアニメーション化することはできません。設定した間隔でコードを実行するには、setIntervalを使用します。また

：

• 変数xは、文字列が含まれていますが、数としてそれを使用しています。
• スタイルを設定するときに'px'を追加しています。

コード：

function floatMenu(rewidth) { 
    var handle, x; 
    if (rewidth.className == ''){ 
    rewidth.className = 'open'; 
    x = parseInt(rewidth.style.width.slice(0, -2)); 
    handle = window.setInterval(function(){ 
     if (x < 190) { 
     x++; 
     rewidth.style.width = x + 'px'; 
     } else { 
     window.clearInterval(handle); 
     } 
    }, 50); 
    } else { 
    rewidth.className = ''; 
    x = parseInt(rewidth.style.width.slice(0, -2)); 
    handle = window.setInterval(function(){ 
     if (x > 30) { 
     x--; 
     rewidth.style.width = x + 'px'; 
     } else { 
     window.clearInterval(handle); 
     } 
    }, 50); 
    }; 
} 

Answer 2

増分変更を遅延/アニメーションするには、setTimeoutまたはsetIntervalを使用する必要があります。

http://jsfiddle.net/qWtGk/6/

window.slide = function(rewidth, amt, min, max) { 
var x = rewidth.style.width; 
x = parseInt(x.replace(/[^\d]/g, "")); 
var evt = setInterval(function() { 
    x += amt 
    if(x < min) x = min; 
    if(x > max) x = max; 
    rewidth.style.width = x + "px"; 
    if(x == min || x == max) clearInterval(evt); 
}, 50); 
}