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


})();

This code does simple animation – it goes from opacity 1 to 0 and back to 1. But i would like to perform this cycle infinitely. i used if (i==1) start = true; but it doesnt help. how do i fix? Second question: when it stops opacity is 1.1. Why? How do i fix?

Answer 1

How about just set “start” back to true when you’re done fading back in. Such as:

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

Here’s my working example: http://jsfiddle.net/vzBZB/8/