JavaScript动画setInterval/clearInterval

我需要制作一个动画： 一种盒子，它变宽并向右移动，直到达到尺寸限制，然后又变薄。 （我试着给“较大”的间隔赋予更高的值，然后清除它，让“较小”的间隔继续播放并缩小它， 它的实际功能：达到200px，然后不断变大变小5px，继续向右移动）

函数动画调用（名称、距离、时间）{
$（名称）。设置动画({
左：区
}，时间）；
$（名称）.css({
宽度：numberrup
});
numberrup=numberrup-5；
}
var=1；
函数animatebig（名称、距离、时间）{
如果（数量<200）{
$（名称）。设置动画({
左：区
}，时间）；
$（名称）.css({
宽度：numberrup
});
numberrup=numberrup+10；
}否则{
净间隔（更大）；
}
}
$（函数（）{
var biger=setInterval（函数（）{
动画图像（'.box1'，“+=1”，100）
}, 100);
var较小=设置间隔（函数（）{
动画调用（'.box1'，“+=1”，100）
}, 100);
});

直到“numberrup”达到200，你实际上是在宽度上加10，减去5

当它超过200时，你只减去5

然后，因为在

$（function（）

范围之外没有定义“biger”，所以仍然会调用

animatebig

，因此框的大小会发生振荡

这样编写代码似乎更有效

$(function () {
    var numberup = 1;
    var delta = 5;

    function animate(name, dist, time) {
        if (delta > 0 && numberup >= 200) {
            delta = -5;
        }
        else if (numberup < 0) {
            clearInterval(timer);
        }
        $(name).animate({
            left: dist
        }, time);
        $(name).css({
            width: numberup
        });
        numberup += delta;
    }
    var timer = setInterval(function () {
        animate('.box1', "+=1", 100)
    }, 100);
});

$（函数（）{
var=1；
varδ=5；
函数动画（名称、距离、时间）{
如果（增量>0&&numberrup>=200）{
delta=-5；
}
否则如果（numberrup<0）{
清除间隔（计时器）；
}
$（名称）。设置动画({
左：区
}，时间）；
$（名称）.css({
宽度：numberrup
});
numberrup+=delta；
}
变量计时器=设置间隔（函数（）{
动画（'.box1'，“+=1”，100）
}, 100);
});

这有一个单一的间隔，增长5，然后收缩5…您可能希望在宽度<0时停止

---

对于更平滑的动画，我建议查看

请使用适当的代码缩进。我做了：我需要制作一个动画：一个长方体变宽并向右移动，直到它达到大小限制，然后再变薄。（我尝试给“大”间隔赋予更高的值，然后清除它并让“小”变小）继续播放并缩小它的间隔，它实际做的是：它达到200px，然后不断变大变小5px，并继续向右移动）1-

var biger

仅在

$（function（）{

范围内定义，因此调用

clearInterval（biger）

在该范围之外什么也不做。2-对象将继续向右移动，因为您在

animatebig

和

animatesmall

huu中都告诉它这样做，好的，我明白了……我会用这个技巧再次与之抗争，谢谢

$(function () {
    var numberup = 1;
    var delta = 5;

    function animate(name, dist, time) {
        if (delta > 0 && numberup >= 200) {
            delta = -5;
        }
        else if (numberup < 0) {
            clearInterval(timer);
        }
        $(name).animate({
            left: dist
        }, time);
        $(name).css({
            width: numberup
        });
        numberup += delta;
    }
    var timer = setInterval(function () {
        animate('.box1', "+=1", 100)
    }, 100);
});