טקסט כמו במכונת כתיבה ב jQuery

[CSS]

טקסט מכונת כתיבה ב jQuery
מכירים את האפקט הזה שזה מראה טקסט כאילו הוא נכתב?
אז במדריך הזה נלמד איך לעשות כזה דבר.
קודם כל ניצור דיב עם id="mytext" ונכתוב בתוכו משהו:

<div id="mytext">Hello everyone! this is a exapmle!</div>

עכשיו נעבור ל jQuery.
מה שבעצם אנחנו צריכים לעשות, זה לקחת את הטקסט, ולהציג כל פעם את האות הבאה.
לכן ניצור משתנה nownum אשר יכיל את המספר של האות הבאה, ניצור משתנה בשם btext, אשר יכיל הטקסט שנמצא עכשיו בתוך הדיב, וניצור משתנה בשם ptext אשר ימחוק את הקו כתיבה (נשתמש בו בהמשך).

var nownum = 0, btext = $("#mytext").text(), ptext;

נאפס את הטקסט שלנו, כדי שנוכל לרשום אותו מחדש:

$("#mytext").text("");

עכשיו ניצור setInterval שבתוכו נעשה את כל העבודה, ונכניס אותו למשתנה sint כדי שנוכל אחר כך לעצור אותו:

var sint = setInterval(function() {

נכניס לתוך המשתנה ptext את הטקסט החדש עם תו אחד פחות, כדי למחוק את קו הכתיבה.

ptext = $("#mytext").text().slice(0,$("#mytext").text().length-1);

עכשיו נבצע תנאי ונבדוק האם סיימנו להכין את כל המילה, במידה וכן נחתוך את ה setInterval ונמחוק את התו האחרון בטקסט - שהוא קו הכתיבה (ptext מכיל את הטקסט בלי התו האחרון).

if(nownum == btext.length) {
clearInterval(sint);
$("#mytext").text(ptext);
}else{

במידה ולא, אז להציג את הטקסט בלי התו האחרון (ptext), ולהוסיף את התו החדש עם קו הכתיבה.

$("#mytext").text(ptext);
$("#mytext").append(btext.charAt(nownum) + "_");
}

נגדיל את ה nownum ב-1.

nownum++;

ונעשה את המהירות כ-40 (אפשר לשנות אותה).

},40);

זהו, אם תבדקו עכשיו תראו את האפקט היפה הזה.
הקוד המלא למי שרוצה לבדוק:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
var nownum = 0, btext = $("#mytext").text(), ptext;
$("#mytext").text("");

var sint = setInterval(function() {
ptext = $("#mytext").text().slice(0,$("#mytext").text().length-1);
if(nownum == btext.length) {
clearInterval(sint);
$("#mytext").text(ptext);
}else{
$("#mytext").text(ptext);
$("#mytext").append(btext.charAt(nownum) + "_");
}
nownum++;
},40);

});
</script>

<div id="mytext">Hello everyone! this is a exapmle!</div>

כל שאלה, הערה, בקשה תתקבל בברכה.

[-Smoxer-]

מדריך שימושי מאוד, תודה רבה!

[.Dor.]

תודה רבה על המדריך. כל הכבוד.