Typed.jsタイプライターエフェクト使用時のエラー

HTML5、CSS、Javascript、Typed.jsを使用してタイピングエフェクトを作成しています。これは）Typed.jsタイプライターエフェクト使用時のエラー

<!DOCTYPE html> 
<html> 
<head lang="en"> 
<meta charset="UTF-8"> 
</head> 
<body> 

<p class ="TypeWirter_effect"></p> 

    <script src="jquery-ui.min.js>"></script>  //This is downloaded from jquery's Website n pasted in same folder 
<script src="jquery.js"></script>   //This is downloaded from jquery's Website n pasted in same folder 
<script src="typed.min.js"></script>  //This is downloaded from Typed.js main Website n pasted in same folder 


<script> 
$(function() { 
    $("#TypeWirter_effect").typed({ 
     strings: ["Want to learn Coding ?", "Want to learn C++","Java","Python"], 
     typeSpeed: 0, 
     loop: true, 
     backSpeed: 30, 
     showCursor: true, 
     backDelay: 500, 
     startDelay: 1000, 
     contentType: 'text', 
     backspace: function(curString, curStrPos) { 


        setTimeout(function() { 

           // check string array position 
           // on the first string, only delete one word 
           // the stopNum actually represents the amount of chars to 
           // keep in the current string. In my case it's 3. 
           if (curString.arrayPos == 20) { 
            curString.stopNum = 14; 
           } 
           //every other time, delete the whole typed string 
           else { 
            self.stopNum = 14; 

           } 
          } 
        ) 
       } 
    }); 
}); 
</script> 
</body> 
</html>

1 =私のコードである私は、カーソルが常に下cursor problemに表示され、これを実行すると、私はすぐ隣にカーソルをしたいですか？この行の最後に印を付けるが、それは常に下に留まる。

2）2番目の文「C++を学びたい」が完全に消去されず、C++ 2が消去され、javaが追加されます。何も、

pタグがparagraphあるドキュメントの.Help リンク==（https://github.com/mattboldt/typed.js/blob/master/README.md）

出典

2016-07-04 Anonymous

1）をうまくpタグにspanタグを変更していないようにみえ.But

は、私は、ドキュメントを読んだことがありますあなたの問題は解決されます。

<span class="TypeWirter_effect"></span>

2）

ちょうどあなたのタイプライターの効果テキストの前にテキストを追加します。

Want to learn <span class="TypeWirter_effect"></span>

とする文字列を変更します。

strings: ["Coding?", "C++?", "Java?", "Python?"]

デモ：https://jsfiddle.net/Brownsugar/cncm5w0u/

コールバック関数を使用して言語タイプライターを起動し、ループさせます。

最初にメイン文.TypeWirter_effectを実行し、完了したら.langを実行します。

HTML：

<span class="TypeWirter_effect"></span><span class="lang"></span>

のjavascript：

$(function() { 
     $('.TypeWirter_effect').typed({ 
      strings: ['Want to learn Coding?', 'Want to learn '], 
      typeSpeed: 50, 
      backDelay: 3000, 
      callback: function(){ 
       showLang(); // run another element 
       $('.typed-cursor').first().hide(); // hide first cursor 
      } 
     }); 
}); 
function showLang() { 
     $('.lang').typed({ 
      strings: ['C++', 'Java', 'Python'], 
      typeSpeed: 50, 
      backDelay: 2000, 
      loop: true 
     }); 
}

デモ：私は2は、第一ラインを消去https://jsfiddle.net/Brownsugar/cncm5w0u/1/

出典

2016-07-04 15:21:52 Lay

たい完全に "コーディングを学びたいですか？" nd私はこのタイプの2つをタイプしたい "C + +を習得したい"次にC++を削除してJavaをその場所に追加し、Javaを削除してPythonをその場所に追加します。 ur ans –

Vこの行に固執する "C++/Java/Pythonを学びたい"。私はこの行を終了するとすぐにループを欲しがる "C++を学びたい" C++がJavaを消去して消去してからPythonを消して " 2番目の文に戻って –

@GEEkSpoTTed私はベストを尽くした、ちょうどこのようなものを作った：https://jsfiddle.net/Brownsugar/cncm5w0u/2/ – Lay

Typed.jsタイプライターエフェクト使用時のエラー

答えて

関連する問題