就像我在标题中所说,我试图用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的答案
它以最后一个值结束,而不是逐步递增。
答案 0 :(得分:2)
您无法通过在循环中设置样式来为任何内容设置动画,因为在退出函数并将控件返回到浏览器之前,用户界面中的任何内容都不会更改。使用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);
};
}
答案 1 :(得分:1)
您必须使用setTimeout或setInterval来延迟/动画增量更改。
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);
}