句読点読み込み "アニメーション"、javascript？

Question

私はいくつかの句読点を表示する良い方法を探しています "アニメーション"を読み込む。

This will display at second 1: "Waiting for your input." 
This will display at second 2: "Waiting for your input.." 
This will display at second 3: "Waiting for your input..." 
This will display at second 4: "Waiting for your input...." 
This will display at second 5: "Waiting for your input." 
This will display at second 6: "Waiting for your input.." 
This will display at second 7: "Waiting for your input..." 
This will display at second 8: "Waiting for your input...." 

などなど：私が欲しいもの

はこのようなものです。

私はspansでドットを囲んで開始し、私はjQueryとディスプレイ1以上とそれらをループ、1以上、1以上は、その後、1にリセットできると思っていたが、コードは非常に不器用だので、私はあなたがする方法を疑問に思いますこれを行う？

Answer 1

文字列のドットを作るのは、疎な配列を作成して、すべての要素を目的の文字で結合することです。

var count = 0; 
setInterval(function(){ 
    count++; 
    var dots = new Array(count % 10).join('.'); 
    document.getElementById('loadingtext').innerHTML = "Waiting for your input." + dots; 
    }, 1000); 

ここにはLive demoがあります。

Answer 2

コードが手に負えなくなったか今確認してください、あなただけ行うことができます：

setInterval(function() { 
    var span = $("#text-loader").children("span:eq(0)"); 
    var ellipsis = span.html(); 
    ellipsis = ellipsis + "."; 
    if (ellipsis.length > 5) { 
    ellipsis = "."; 
    } 
    span.html(ellipsis); 
}, 1000); 

<div id="text-loader"> 
    This will display at second 1: "Waiting for your input<span>.</span> 
</div> 

そして1用として、あなたは、期間の数とそれをスワップアウトすることができます。

Answer 3

は、この機能を試してみてください。i'vはここhttp://jsfiddle.net/XFd39/

var i=0; 
function f() { 
if(i<=4) 
$('#a').append("."); 
i++; 
if(i==4){ 
    $('#a').html(""); 
    i=0; 
} 
setTimeout(f,500); 
} 
f(); 

Answer 4

ここでは例を置くかなり簡単な変形である：http://jsfiddle.net/psycketom/FusdC/

すべてがそこに行っているかを理解するには、以下のコメントをお読みください。ここで

var span = $('.dots'); // take the element where you have the maximum count of dots 
var text = span.text(); // cahce it's text value 

// we set up a function here, so we can loop it all the time 
var loading = function() 
{ 
    $({ 
     count : 1 // we start at one dot 
    }).animate({ 
     count : text.length // together forming all of it 
    }, { 
     duration : 1000, // make the animation complete in one second 
     step : function() { 
      span.text(text.substring(0, Math.round(this.count))); // on each step, change the text accordingly to current iteration 
     }, 
     complete : function() { 
      loading(); // once complete, start all over again 
     } 
    }); 
}; 

loading(); // start it up for the first time 

あなたが簡単にあなたがjQueryを使ってもいいです場合には他の利点の合計時間とたくさんの変更、希望する場合にもeasingを使用することの利点を得ます。

Answer 5

Dude、このアニメーションを表示しない限り永遠にアニメーションを停止する方法が必要ですか？

でもグローバル変数について考えてはいけない、これはJavaScriptのあり、それはそれ:)

<p>please wait<span id="wait"></span></p> 

<input type="submit" id="start" value="start"> 
<input type="submit" id="stop" value="stop"> 

<script type="text/javascript"> 
    $(document).ready(function() { 

     var animator = function($el) { 
      var dotCount = 1; 
      var started = true; 
      return { 
       "start" : function step() { 
        dotCount = (dotCount + 1) % 10; 
        $el.text(new Array(dotCount).join('.')); 
        if (started) { 
         setTimeout(step, 100); 
        } 
       }, 
       "stop" : function() { 
        started = false; 
       } 
      } 
     }; 

     var animatedWait = animator($("#wait")); 

     $("#start").click(animatedWait.start); 
     $("#stop").click(animatedWait.stop); 
    }); 
</script> 

Answer 6

ピュアCSSソリューション

デモ用のクロージャを持っている：jsfiddle.net/feklee/D59P9

• HTML：

  Waiting<span class="dots"><span>.</span><span>.</span><span>.</span></span> for more. 
  

• CSS：

  @keyframes dots-1 { from { opacity: 0; } 25% { opacity: 1; } } 
  @keyframes dots-2 { from { opacity: 0; } 50% { opacity: 1; } } 
  @keyframes dots-3 { from { opacity: 0; } 75% { opacity: 1; } } 
  @-webkit-keyframes dots-1 { from { opacity: 0; } 25% { opacity: 1; } } 
  @-webkit-keyframes dots-2 { from { opacity: 0; } 50% { opacity: 1; } } 
  @-webkit-keyframes dots-3 { from { opacity: 0; } 75% { opacity: 1; } } 
  
  .dots span { 
      animation: dots-1 1s infinite steps(1); 
      -webkit-animation: dots-1 1s infinite steps(1); 
  } 
  
  .dots span:first-child + span { 
      animation-name: dots-2; 
      -webkit-animation-name: dots-2; 
  } 
  
  .dots span:first-child + span + span { 
      animation-name: dots-3; 
      -webkit-animation-name: dots-3; 
  } 
  

のWebKit-唯一の代替

利点：いいえ、ネストされたタグ。これは、省略記号をコンテンツ として::after疑似要素に入れることができることを意味します。

デモ：jsfiddle.net/feklee/vFT7W

• HTML：

  Waiting<span>...</span> for more. 
  

• CSS：

  body { 
      font-family: 'Roboto', sans-serif; 
      font-size: 50px; 
  } 
  
  @-webkit-keyframes dots { 
      0% { background-position: 0px; } 
      100% { background-position: 50px; } 
  } 
  
  span { 
      background: linear-gradient(to right, white 50%, black 50%); 
      color: transparent; 
      -webkit-background-clip: text; 
      -webkit-animation: dots 1s infinite steps(4); 
      padding-right: 40px; 
      margin-right: -40px; 
  } 
  

Answer 7

これは非常に簡単になります

HTML

<span class="dots"></span> 

jQueryの

setInterval(function() { 
    var th = $('.dots'); 
    if(th.text().length < 5){ 
     th.text(th.text()+"."); 
    }else{ 
     th.text(""); 
    } 
}, 500); 

Demo