jQuery文本動畫 - 文本淡入

Question

我正在尋找使用jQuery來動畫文本的方式。

我想顯示'正在登錄...'消息，其中3個點應該在頁面加載時隱藏，並且在每個可以說300ms 1點後都可見。這一切都應該創造動畫。

是否有任何jQuery函數創建完成，否則我將不得不對我自己的？

任何建議非常感謝。

Answer 1

這可以很好地而做一個jQuery插件。這使得它可以重複使用和配置。

這樣的事很簡單。它有3個默認值，可被覆蓋

• 文本默認爲「加載」
• numDots點數循環回零之前數到，默認爲3

• 延遲添加新點之間的延遲。然後默認爲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); 
  

用法可能是

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

而且一個活生生的例子：http://jsfiddle.net/6bbKk/

Answer 2

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

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

使用帶：

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

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

Answer 3

在jQuery中存在的延遲（毫秒，回調）的功能。您可以使用回調函數來編排延遲。然而，出於您的目的，javascript window setTimeout可能會更合適，因爲您可以在加載完成後立即運行window.clearTimeout，從而產生更響應的UI。

一個例子：

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

Answer 4

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