jQuery – אנימציות

מאמר זה מספר על אפקטים נוספים ב-Jquery ובמיוחד אנימציות - איך לגרום לאלמנטים לרקוד בדף האינטרנט בלי פלאש ובלי בלגנים, רק עם קוד פשוט ביותר של Jquery.

אחרי שלמדנו על אפקטים במאמר הקודם, הגיע הזמן להתקדם לאנימציות, אנימציות הן חלק מדליק במיוחד של jQuery שמאפשרות לנו להזיז או לשנות תכונות של אלמנטים באמצעות אנימציה. האנימציה ב-jQuery היא ליניארית – כלומר אם אני מזיז את האלמנט הוא יזוז בקו ישר. אם אני משנה את השקיפות של האלמנט זה יקרה בקו ישר. כמובן שעם פלאגינים ישנה אפשרות לאנימציה לא ליניארית.

אז בואו ניצור אנימציה באמצעות ה-div הצהוב שאנו מכירים מהמאמר הקודם. באופן עקרוני הסינטקס של פונקצית אנימציה פשוט למדי. כל מה שאני צריך לעשות זה לכתוב את הסלקטור, האירוע ואז את הפונקציה animate באופן הבא:


$("#mydiv1").animate({ 
        width: "70%",
        opacity: 0.4,
      }, 1500 );

כאשר הפרמטרים (במקרה הזה רוחב ושקיפות) הם הפרמטרים שאליהם האלמנט מגיע לאחר תום האנימציה והמספר (במקרה הזה 1500) הוא מספר המילישניות שאורכת האנימציה. אולי זה יהיה מובן יותר עם קוד:

אלמנט חביב

וכך הקוד נראה:


<script type="text/javascript"> 
$(document).ready(function() {
$("#myButton1").click(function () {
$("#mydiv1").animate({ 
        width: "70%",
        opacity: 0.4,
      }, 1500 );
});
 });
</script>

אם אתם משתמשים באנימציה לא ליניארית, אפשר להכניס אותה באופן הבא (השתמשתי כאן גם ב-swing וגם ב-linear).

אלמנט חביב

וכך הקוד נראה:


<script type="text/javascript"> 
$(document).ready(function() {
$("#myButton11").click(function () {
$("#mydiv11").animate({ 
        width: ["70%" , 'linear'],
        opacity: [0.4, 'swing'] 
      }, 1000);
});
 });
</script>

אפשר כמובן לשים כמה פרמטרים שרוצים וגם פרמטרים של מיקום לתזוזה. רק חשוב להדגיש משהו אחד: הפרמטרים שמכניסים צריכים להיות רלוונטיים לאלמנט. זה נשמע מטומטם קצת אבל זה לא. תחשבו למשל על אלמנט מסוים שאני רוצה להזיז אותו ועל ידי כך אני רוצה לשנות לו את הפרמטר left. אם אין לו פרמטר left ו position: relative\absolute הסקריפט לא יעבוד. מה שאני עושה באנימציות בדרך כלל זה לדאוג שהפרמטרים שאותם אני משנה יהיו ב-CSS של האלמנט מראש ואז אין לי בעיות ותסכולים מכך שהסקריפט לא עושה כלום למרות שאין שגיאות.

אלמנט חביב

הקוד נראה כך:


<script type="text/javascript"> 
$(document).ready(function() {
$("#myButton2").click(function () {
$("#mydiv2").animate({ 
        marginRight: "350px",
      }, 2500 );
});
 });
</script>

חשוב מאד להדגיש כי על כל הפרמטרים להיות ב-Camel case, כלומר אם יש קו "-" שמפריד ביניהם, כמו למשל margin-right, אנו מורידים את המקף וכותבים את האות הראשונה כאות גדולה. כך למשל font-size יהיה fontSize.

מעבר לכך אין צורך בהרבה הסברים. אפשר לשים callback כמו בשאר פונקציות ה-events.

שרשור של אנימציות

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

אלמנט חביב

איך זה נראה? כך:


<script type="text/javascript"> 
$(document).ready(function() {
    $("#myButton3").click(function(){
      $("#mydiv3").animate( { width:"90%"}, 1000 )
         .animate( { fontSize:"24px" } , 1000 )
         .animate( { borderLeftWidth:"15px" }, 1000);
    });
 });
</script>

אפשר גם לעשות delay בין האנימציות השונות באמצעות פונקצית delay שכל מה שהיא מקבלת זה את מספר המילישניות שבהן האנמציה עוצרת.

אלמנט חביב

איך זה נראה? כך:


<script type="text/javascript"> 
$(document).ready(function() {
    $("#myButton31").click(function(){
      $("#mydiv31").animate( { width:"90%"}, 1000 )
         .animate( { fontSize:"24px" } , 1000 )
	 .delay(200)
         .animate( { borderLeftWidth:"15px" }, 1000);
    });
 });
</script>

עצירת אנימציה

אפשר גם לעצור אנימציה, הכפתור מפעיל את האנימציה לחצו על ה-DIV על מנת לעצור את האנימציה.

אלמנט חביב

ככה הקוד נראה:


<div id="mydiv4" style="position: relative; left:-200px; width: 50px; height: 50px; background-color: Yellow;">אלמנט חביב</div> 
<p><button id="myButton4">Animate it</button></p> <script type="text/javascript"> 
$(document).ready(function() {
$("#myButton4").click(function(){
      $("#mydiv4").animate({left: '+=100px'}, 2000);
    });
    // Stop animation when button is clicked
    $("#mydiv4").click(function(){
      $("#mydiv4").stop();
    });
 });
</script>

איך זה עובד? מאד פשוט, שם האלמנט ואז פונקצית stop() וכמובן אפשר לשים את הארגומנטים clearQueue לעצירה של כל האנימציות של האלמנט (אם יש כמה אנימציות כמו שהראיתי קודם לכן) או gotoEnd שפשוט משלים את האנימציה מייד בלי אפקט ההשהיה (המילישניות). למי שלא מבין, ניתן להכניס את הארגומנטים בתוך פונקצית ה-stop ולראות מה זה עושה.

אם אתם רוצים להשבית את כל האנימציות, על סקריפט מסוים, כל מה שצריך זה לכתוב את השורה הבאה:
jQuery.fx.off = true; ואז לא יהיו אנימציות בסקריפט. לא יצא לי להשתמש בזה מעולם, אבל טוב לדעת.

toggle

במאמר הקודם הראיתי את האפקטים ואת האפקטים הנגדיים באמצעות כפתור שעם פונקצית toggle מפעיל אפקט כאשר "מדליקים" אותו ואפקט נגדי כאשר "מכבים" אותו. אפשר לעשות את אותו הדבר עם toggle ולחסוך קוד במקום לכתוב אפקט ואפקט נגדי פשוט כותבים את האפקט המיועד ו-toggle ו-jQuery כבר תדע מה לעשות. דוגמא תבהיר את העניין:

אלמנט חביב


<script type="text/javascript"> 
$(document).ready(function() {
$("#myButton5").click(function(){
      $("#mydiv5").toggle();
    });
 });
</script>

הדוגמא הזו היא של toggle ללא פרמטרים וכאן אין אנימציה, אם האלמנט הוא display: none ה-toggle פשוט יראה אותו ואם לא אז הוא יחביא אותו. אפשר להכניס לתוך ה-toggle גם slow, fast או מספר במילישניות ואז התוצאה תהיה העלמה/תצוגה אבל באנימציה נחמדה.

אלמנט חביב


<div id="mydiv6" style="width: 100px; height: 100px; background-color: Yellow;">אלמנט חביב</div> 
<p><button id="myButton6">Toggle it</button></p> 
<script type="text/javascript"> 
$(document).ready(function() {
$("#myButton6").click(function(){
      $("#mydiv6").toggle("slow");
    });
 });
</script>

עד כאן בנושא אפקטים. במאמר הבא אני עוסק במניפולציות, איך לשנות אלמנטים ואת תוכנם. וגם את זה אפשר לעשות בקלות.

פוסטים נוספים שכדאי לקרוא

צילום מסך של סוואגר
יסודות בתכנות

openAPI

שימוש בתשתית הפופולרית למיפוי ותיעוד של API וגם הסבר בסיסי על מה זה API

תמונת תצוגה של מנעול על מחשב
פתרונות ומאמרים על פיתוח אינטרנט

הגנה מפני XSS עם Trusted Types

תכונה ב-CSP שמאפשרת מניעה כמעט הרמטית להתקפות XSS שכל מפתח ווב צריך להכיר וכדאי שיכיר.

יסודות בתכנות

מספרים בינאריים בקוד

איך, ויותר חשוב למה, משתמשים במספרים בינאריים בתכנות? גם בפייתון ובג׳אווהסקריפט?

גלילה לראש העמוד