setInterval动画

Question

http://jsfiddle.net/vzBZB/5/

(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。为什么？我该如何解决？

Answer 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/

Answer 2

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

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


})();