jQuery text animation - text fade in

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 muc开发者_运维百科h appreciated.

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>

In jQuery there is the delay(milliseconds, callback) function. You could use the callback function to orchestrate the delay. However for your purposes the javascript window setTimeout would probably be more appropriate as you can run window.clearTimeout as soon as your loading is complete, resulting in a more responsive UI.

An example:

var timeoutId;

$(document).ready( function() {
    timeoutId = window.doTextUpdate(slowAlert, 2000);   
});

function doTextUpdate() {
    var current = $("#mytext").val();
    if(current.indexOf("...")) {
        $("#mytext").val("Loading");
    } else {
        $("#mytext").val(current + ".");
    }
}

function loadComplete() {
    window.clearTimeout(timeoutId);
}

http://api.jquery.com/fadeOut/

http://api.jquery.com/fadeIn/

Use with :

 $(document).ready( function() {
      //fadeIn your text, fake function for example
      FadeInMyText();

      setTimeout(function() {
        // fadeOut your text, fake function for example                           
        FadeOutMyText();
      }, 300);
 });