Question: I looking for way to animate text with jQuery.

I want to display 'logging in...' message where 3 dots should be hidden on page load and after every lets say 300ms 1 dot to become visible. Which all together should create animation.

Is there any jQuery function created to do exact that or I will have to right my own?

Any suggestions much appreciated.

Answer: 
This can be done rather nicely with a jQuery plugin. This makes it re-usable and configurable.

Something like this is simple enough. It has 3 defaults, which can be overriden

* **text** defaulted to "Loading"
* **numDots** the number of dots to count up to before recycling back to zero, defaults to 3
* **delay** the delay inbetween adding new dots. defaults to 300ms

```
(function($) {

$.fn.elipsesAnimation = function(options) {

    var settings = $.extend({}, { //defaults
        text: 'Loading',
        numDots: 3,
        delay: 300
    }, options);
    var currentText = "";
    var currentDots = 0;
    return this.each(function() {
        var $this = $(this);
        currentText = settings.text;
        $this.html(currentText);
        setTimeout(function() {
            addDots($this);
        }, settings.delay);
    });

    function addDots($elem) {
        if (currentDots >= settings.numDots) {
            currentDots = 0;
            currentText = settings.text;
        }
        currentText += ".";
        currentDots++;
        $elem.html(currentText);
        setTimeout(function() {
            addDots($elem);
        }, settings.delay);
    }
}

})(jQuery);

```

Usage could then be

```
// Writes "Hello World", counts  up to 10 dots with a 0.5second delay
$('#testDiv').elipsesAnimation ({text:"Hello World",numDots:10,delay:500});

```

And a live example: <http://jsfiddle.net/6bbKk/>
```
<script type="text/javascript" language="javascript">
$(function(){launchAnimation('#animate');});

function launchAnimation(container){
    var cont = $(container);
    var i=0;
    setInterval(function(){
        ++i;
        if (i<4){
            var dot=jQuery("<span class='dot'>.</span>").appendTo(cont);
        }
        else{
            i=0;
            cont.find('.dot').remove();
        }
    },300);
}

</script>
<div id='animate' style='border:1px solid red'>Logging in</div>

```