javascript - 在 Javascript 中使用时间延迟

Question

我有一个 gif 图像，我想通过使高度和/或宽度可变来拉伸它。但是，我希望以我设置的速度完成图像拉伸，因此它在屏幕上出现时是渐进式且可见的。下面的代码可以工作，但它会立即将图像呈现为完整的图像，没有可见的拉伸。所以我想：插入某种计时器功能来减慢“拉伸”代码的执行速度。我已经尝试过 setTimeout 和 setInterval （使用 1/100 秒延迟），但我无法使任何一个工作。我在这里做错了什么？

$(window).load(function(){

  setInterval(function(){
            var i=1;
            for (i;i<400;i++) {
            $("#shape1").html('<img src="image.gif" width="'+i+'" height="40">');
            }
            },10);
      });

Answer 1

您的代码的问题是

• 在每次间隔迭代中，您重复整个for循环
• 你永远不会停止间隔循环

您可以像这样修复现有代码：

var i=1;
function step() {
     $("#shape1").html('<img src="image.gif" width="'+i+'" height="40">');
     if (i++<400) setTimeout(step, 10);
}
step();

您也可以简单地更改宽度，而不是每次都替换 #shape1 内容：

var i=1;
var $img = $('<img src="image.gif" width=1 height="40">').appendTo('#shape1');
function step() {
     $img.css('width', i);
     if (i++<400) setTimeout(step, 10);
}
step();

示范

但是 jQuery 有一个非常方便的动画功能，专门用于这类事情。

Answer 2

正如 Dystroy 建议的那样。改用jQuery动画

setInterval(function(){
      var i=1;
      for (i;i<400;i++) {
          $("#shape1").animate({
              width : i
          },10);
      }
}, 10);

这是一个jsfiddle

Answer 3

如果您的浏览器支持 CSS3 过渡效果，它就很棒。

.resize {
    width: 200px;
    height: 50px;
    transition: width 1s ease;
}

只需将类添加到元素以使其伸展。

img.className = "resize";

CSS 演示