setInterval 动画答案

【问题标题】：setInterval animationsetInterval 动画
【发布时间】：2011-11-30 21:31:38
【问题描述】：

(function(){
var i = 1;
var start = true;   
    setInterval(function(){
        if (i>0&&start){
         var o = $("#box").css("opacity");

            var s = parseFloat(o) - 0.1;

            $("#box").css("opacity", s.toString());
           i = s;    
        }

        else {
        start = false;
         var o = $("#box").css("opacity");
        var s = parseFloat(o) + 0.1;

         $("#box").css("opacity", s.toString());
        i = s; 

        if (i==1) start = true;
        }




    }, 100);


})();

这段代码做简单的动画 - 它从不透明度 1 到 0 再回到 1。但我想无限地执行这个循环。我使用了if (i==1) start = true;，但它没有帮助。我该如何解决？第二个问题：什么时候停止不透明度是1.1。为什么？我该如何解决？

【问题讨论】：

你应该尝试用 Jquery 的 .animate() 来做这件事......它会让你的生活变得更简单。

标签： javascript setinterval

【解决方案1】：

当你完成淡入时将“start”设置回true如何。例如：

start = false;
var o = $("#box").css("opacity");
var s = parseFloat(o) + 0.1;

$("#box").css("opacity", s.toString());
i = s;
if(s >= 1) start = true; //Reset for next loop

这是我的工作示例：http://jsfiddle.net/vzBZB/8/

【讨论】：

我不确定。 i == 1 在我尝试时有效。您是否将代码放在正确的位置？根据浏览器、操作系统、CPU 类型等，比较 float 和 int 可能有些不准确。使用大于运算符是一个更好的主意。
jsfiddle.net/vzBZB/11 这就是我尝试的方式.. 为什么它会转到 1.1？我如何使它进入 1.0？？
只需将if(s > 1) start = true; 更改为if(s >= 1) start = true;
不适合我。你用的是什么浏览器？
谷歌浏览器 15.0.你的是什么？？

【解决方案2】：

您可能会发现简单地递归使用 .fadeToggle 的回调参数会更容易。请参阅我对您的 jsfiddle 的更新：http://jsfiddle.net/vzBZB/6/。

【讨论】：

【解决方案3】：

当它恢复到完全不透明时，你没有设置 start 回到 true...

添加这个

if (o >= 1){
    start=true;   
}

完整代码：

(function(){
var i = 1;
var start = true;   
    setInterval(function(){
        if (i>0&&start){
         var o = $("#box").css("opacity");

            var s = parseFloat(o) - 0.1;

            $("#box").css("opacity", s.toString());
           i = s;    
        }

        else {
        start = false;
         var o = $("#box").css("opacity");
        var s = parseFloat(o) + 0.1;

         $("#box").css("opacity", s.toString());
        i = s; 

        if (o >= 1){
            start=true;   
        }

        }




    }, 100);


})();

【讨论】：