Stop animation after one cycle

[briantjacobs]

Hi,
This is a great script, and nice and clean. I've been messing with the code, trying to get an animation that just runs once, stops, and then resets the text to its pre-processed state, but haven't been totally successful. Got any tips?
Thanks,
Brian

[briantjacobs]

Ok, I managed to get something working. There's probably a better way to do this, but I added an extra IF to detect when there's been a full cycle, at which point the recursion stops and data gets cleared and restored.

            if (options.animate) {

                (
                    function(obj,interval) {
                        var options = $(obj).data('options');
                        var i = setTimeout(function() {
                          //ALTERED CODE
                          if (options.iterations < options.colors.length) {
                                $.fn.rainbow.shift(obj);
                          } else {
                              var originalText = options.originalText;
                              $(obj).removeData('options');
                              $(obj).html(originalText);
                          }
                          //END ALTERED CODE
                        },interval);
                        options.interval = i;
                        $(obj).data('options',options);
                    }
                )(obj,pause?options.pauseLength:options.animateInterval);
            }   

The desired effect works when I use this config:

  $(anchor).rainbow({ 
         colors: [
             '#FF0000',
             '#f26522',
             '#fff200',
             '#00a651',
             '#28abe2',
             '#2e3192',
             '#6868ff'
         ],
         animate: true,
         animateInterval: 50,
         pad: true,
         pauseLength: 1000
     })

The only issue, and this is an issue in general, is if you fire off the Rainbow function on something that's currently animating, it starts to animate the generated markup, and things get crazy!

So i'm not the most experienced JS/jQuery guy, and I dont really understand the convention you're using, with the open parenthesis after "if (options.animate) {", the initial unnamed function "function(obj,interval) {", and the following "(obj,pause?options.pauseLength:options.animateInterval);". Do you know what this pattern is called, so I can read more about it? Thanks!

[benbrown]

The parenthesis around the function is creating a "closure" which is used to keep the object being rainbow-ified in scope for the setTimeout function.

The pause?options.pauseLength:options.animateInterval is called a ternary, basically it says if (pause) { options.pauseLength } else { options.animateInterval }

[briantjacobs]

thanks for this.