Question

就像我在标题中所说，我试图用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);
}

Js动画宽度没有jquery

2 个答案: