jQuery – אנימציות

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

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

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

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

Animate it

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

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

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

Animate it

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

<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 של האלמנט מראש ואז אין לי בעיות ותסכולים מכך שהסקריפט לא עושה כלום למרות שאין שגיאות.

Animate it

הקוד נראה כך:

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

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

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

Animate it

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

<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 שכל מה שהיא מקבלת זה את מספר המילישניות שבהן האנמציה עוצרת.

Animate it

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

<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 על מנת לעצור את האנימציה.

Animate it

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

<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 כבר תדע מה לעשות. דוגמא תבהיר את העניין:

Toggle it

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

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

Toggle it

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

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