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

Demonstration

但jQuery有一个非常方便的animate函数，仅用于此类事情。

Answer 2

正如Dystroy所说。使用jQuery animate代替

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";

在Javascript中使用时间延迟

3 个答案:

css demo