Js动画宽度没有jquery

时间:2011-12-13 19:13:35

标签: javascript

就像我在标题中所说,我试图用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的答案

它以最后一个值结束,而不是逐步递增。

2 个答案:

答案 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来延迟/动画增量更改。

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);
}