duration: מחרוזת או מספר המגדירים כמה זמן אנימציה תעבוד.
easing: מחרוזת, המציינת איזה פונקצית הפגה תשתמש עבור המעבר.
complete: פונקציה שמופעלת כאשר אנימציה מסתיימת.
step: פונקציה שמופעלת אחרי כל צעד של האנימציה.
queue: ערך בולאני המציין אם להציב את האנימציה בתור האפקטים. אם false, אנימציה תתחיל מייד.
specialEasing: מפה של אחת או יותר תכונות CSS המוגדרות על ידי מאפיינים של הארגומנט ופונקציות הפגה התואמות (הוספה ב- 1.4).

שיטה .animate() מאפשרת לנו ליצור אפקטים של אנימציה על כל מאפיינים המספריים של CSS. מאפיין חובה היחיד הוא מפת תכונות של CSS. מפה הזו היא דומה לזו שיכולה להישלח לתוך שיטה css(), חוץ מזה שרשימת תכונות יותר מוגבלת.

כל התכונות של אנימציה צריכות להיות מספריות (למעט תכונות להלן); על תכונות שהן לא מספריות לא ניתן להפעיל אנימציה עם שימוש בפונקציות בסיסיות של jQuery. (לדוגמה, על width, height, או left ניתן להפעיל אנימציה, אבל על background-color לא ניתן.) ערכי תכונה נחשבים כי מספר הפיקסלים, אלא אם צוין אחרת. יחידות em ו- % ניתן לציין במקריים מסוימים.

בנוסף לערכים מספריים, כל תכונה יכולה לקבל מחרוזות 'show', 'hide', ו- 'toggle'. קיצורי דרך אלה מאפשרים לבצע הסרתה או הצגה של אנימציה, כי לוקחים בחשבון את סוג התצוגה של האלמנט.

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

משך

משך ניתן באלפיות השניה; מספר גדול יותר מציין אנימציה איטית יותר, ולא מהירה יותר. ביטוי 'fast' ו- 'slow' מתאים למשך של 200 ו- 600 אלפיות השניה בהתאם. אם ביטויים אחרים סופקו או אם פרמטר duration לא מוגדר, משמשת משך ברירת מחדל של 400 אלפיות השניה.

פונקציה של קריאה חוזרת

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

ניתן להפעיל אנימציה על כל אובייקט, לדוגמה, תמונה רגילה:

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" 
  style="position: relative; left: 10px;" />

אנחנו יכולים לבצע אנימציה על נראות, הזזה שמאלה וגובה של תמונה בו זמנית:

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});

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

opacity של התמונה מוגדר על ערך היעד, לכן תכונה הזו לא תשתנה בלחיצה השניה. מכיוון שהגדרנו ערך היעד עבור left, כי ערך יחסי, תמונה תמשיך לזוז ימינה בזמן לחיצה השניה.

תכונה position של האלמנט לא צריכה להיות static אם אנחנו רוצים לבצע אנימציה של תכונה left, כמו שעשינו בדוגמה.

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

הפגה

פרמטר שנשאר .animate() הוא מחרוזת של שמות פונקצית הפגה. פונקצית הפגה מגדירה מהירות שאיתה אנימציה מתקדמת בנקודות שונות. שימוש בהפגת ברירת מחדל בסיפריית jQuery נקרא swing, התקדמות בקצב קבועה נקראה linear. פונקציות הפגה נוספות נגישות באמצעות תוספות, בעיקר מערכת jQuery UI.

הפגה על פי תכונות

החל מגירסה jQuery 1.4, אנחנו יכולים להגדיר הפגה של פונקציות על פי תכונות בתוך קריאה אחת של .animate(). בגירסה ראשונה של .animate(), כל תכונה יכולה לקבל מערך כי ערך עצמו: אלמנט ראשון של מערך היא תכונה של CSS, אלמנט שני של מערך היא פונקצית הפגה. אם פונקצית הפגה על פי תכונות לא מוגדרת עבור תכונה מסוימת, היא משמשת בערך אופציונלי של שיטה .animate() של ארגומנט הפגה. אם ארגומנט הפגה לא מוגדר בברירת מחדל משמש swing של פונקציה.

אנחנו יכולים לבצע אנימציה בו זמנית על רוחב וגובה באמצעות פונקצית הפגה swing ואטימות באמצעות פונקצית הפגה linear:

$('#clickme').click(function() {
  $('#book').animate({
    width: ['toggle', 'swing'],
    height: ['toggle', 'swing'],
    opacity: 'toggle'
  }, 5000, 'linear', function() {
      $(this).after('<div>Animation complete.</div>');
  });
});

בגירסה השניה .animate(), אופציות של מפה יכולות להכיל מאפיין specialEasing, אשר הוא בעצמו מפה של מאפייני CSS ופונקציות הפגה מתאימות. אנחנו יכולים בו זמנית להפעיל אנימציה על רוחב באמצעות linear של פונקציה הפגה וגובה באמצעות easeOutBounce של פונקציה הפגה.

$('#clickme').click(function() {
  $('#book').animate({
    width: 'toggle',
    height: 'toggle'
  }, {
    duration: 5000, 
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    }, 
    complete: function() {
      $(this).after('<div>Animation complete.</div>');
    }
  });
});

כפי שצוין קודם, תוסף דרוש עבור פונקציה הוא easeOutBounce.

הערות נוספות:

כל האפקטים של jQuery, כולל .animate(), ניתן לכבות באופן גלובלי באמצעות הגדרת jQuery.fx.off = true. למידע מפורט ראו jQuery.fx.off.

דוגמאות

דוגמה 1

תלחצו על הכפתור כדי להפעיל אנימציה של אלמנט div עם מספר מאפיינים שונים.

    // Using multiple unit types within one animation.
    $("#go").click(function(){
      $("#block").animate({ 
        width: "70%",
        opacity: 0.4,
        marginLeft: "0.6in",
        fontSize: "3em", 
        borderWidth: "10px"
      }, 1500 );
    });

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 1 - קוד מלא:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script>
  $(document).ready(function(){
    // Using multiple unit types within one animation.
    $("#go").click(function(){
      $("#block").animate({ 
        width: "70%",
        opacity: 0.4,
        marginLeft: "0.6in",
        fontSize: "3em", 
        borderWidth: "10px"
      }, 1500 );
    });
  });
  </script>
  <style>
  div { 
    background-color:#bca; 
    width:100px; 
    border:1px solid green;
  }
  </style>
</head>
<body>
  <button id="go">» Run</button>
  <div id="block">Hello!</div>
</body>
</html>

נסה זאת בעצמך

דוגמה 2

מראה אלמנטים div במהלך יחסי. בלחיצה על כפתורים אלמנטים div זזים לצדדים בהתאמה.

    $("#right").click(function(){
      $(".block").animate({"left": "+=50px"}, "slow");
    });

    $("#left").click(function(){
      $(".block").animate({"left": "-=50px"}, "slow");
    });

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 2 - קוד מלא:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script>
  $(document).ready(function(){
    $("#right").click(function(){
      $(".block").animate({"left": "+=50px"}, "slow");
    });
    $("#left").click(function(){
      $(".block").animate({"left": "-=50px"}, "slow");
    });
  });
  </script>
  <style>
  div { 
    position:absolute; 
    background-color:#abc; 
    left:50px;
    width:90px; 
    height:90px;
    margin:5px; 
  }
  </style>
</head>
<body>
  <button id="left">«</button> <button id="right">»</button>
<div class="block"></div>
</body>
</html>

נסה זאת בעצמך

דוגמה 3

אנימציה של כל הפסקאות, מופעלת גם על גובה וגם על השקיפות. משך האנימציה 600 אלפיות השנייה.

$("p").animate({
      "height": "toggle", "opacity": "toggle"
    }, "slow");

דוגמה 4

אנימציה של כל הפסקאות, מגדיר תכונת סגנון left ל-50 ושקיפות ל-1 ( 100% נראות ). משך האנימציה 500 אלפיות השנייה.

$("p").animate({
      "left": "50", "opacity": 1
    }, 500);

דוגמה 5

דוגמת שימוש בפונקציה "easing" ( "החלשות") כדי לקבל סגנון אנימציה אחר. פונקציה תעבוד רק אם קיים תוסף מתאים. שימו לב, פונקציה לא מתבצעת אם אלמנט הפסקה במצב hidden.

$("p").animate({
      "opacity": "show"
    }, "slow", "easein");

דוגמה 6

כפתור ראשון מציג דוגמה לאנימציה המקבילה. מבצע הרחבת אלמנט div ל-90% מרוחב המקסימלי. במקביל משתנה גודל הטקסט. בסיום הגדלת הטקסט משתנה רוחב גבול הצדדי.

    $("#go1").click(function(){
  $("#block1").animate( { width:"90%" }, { queue:false, duration:3000 } )
         .animate( { fontSize:"24px" }, 1500 )
         .animate( { borderRightWidth:"15px" }, 1500);
    });
    $("#go2").click(function(){
      $("#block2").animate( { width:"90%"}, 1000 )
         .animate( { fontSize:"24px" } , 1000 )
         .animate( { borderLeftWidth:"15px" }, 1000);
    });
    $("#go3").click(function(){
      $("#go1").add("#go2").click();
    });
    $("#go4").click(function(){
      $("div").css({width:"", fontSize:"", borderWidth:""});
    });

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דןגמה 6 - קוד מלא:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script> 
  <script type="text/javascript" language="javascript">
  $(document).ready(function(){
    $("#go1").click(function(){
  $("#block1").animate( { width:"90%" }, { queue:false, duration:3000 } )
         .animate( { fontSize:"24px" }, 1500 )
         .animate( { borderRightWidth:"15px" }, 1500);
    });
    $("#go2").click(function(){
      $("#block2").animate( { width:"90%"}, 1000 )
         .animate( { fontSize:"24px" } , 1000 )
         .animate( { borderLeftWidth:"15px" }, 1000);
    });
    $("#go3").click(function(){
      $("#go1").add("#go2").click();
    });
    $("#go4").click(function(){
      $("div").css({width:"", fontSize:"", borderWidth:""});
    });
  });
  </script>
  <style>div { 
    background-color:#bca; 
    width:200px;
    height:1.1em;
    text-align:center;
    border:2px solid green;
    margin:3px;
    font-size:14px;
  }
  button {
    font-size:14px;
  }
  </style>
</head>
<body>
  <button id="go1">» Animate Block1</button>
  <button id="go2">» Animate Block2</button>
  <button id="go3">» Animate Both</button>
  <button id="go4">» Reset</button>
  <div id="block1">Block1</div>
  <div id="block2">Block2</div>
</body>
</html>

נסה זאת בעצמך

דוגמה 7

אנימציה של כל הפסקאות, מופעלת גם על גובה וגם על השקיפות. משך האנימציה 600 אלפיות השנייה.

$("p").animate({
      "height": "toggle", "opacity": "toggle"
    }, { duration: "slow" });

דוגמה 8

אנימציה של כל הפסקאות, מגדיר תכונת סגנון left ל-50 ושקיפות ל-1 ( 100% נראות ). משך האנימציה 500 אלפיות השנייה. בדוגמה הזאת אין תור לביצוע אפקטים, כל האפקטים מתבצעים במקביל.

$("p").animate({
      left: "50px", opacity: 1
    }, { duration: 500, queue: false });

דוגמה 9

$("p").animate({
      "opacity": "show"
    }, { "duration": "slow", "easing": "easein" });

דוגמה 10

דוגמת שימוש בפונקציה callback. ארגומנט ראשון הוא מערך של מאפייני CSS, השני מציין שמשך האנימציה הוא 1000 אלפיות השנייה לסיום, ארגומנט השלישי - סוג של היחלשות, וארגומנט הרביעי - פונקציה ללא שם.

$("p").animate({
       height:200, width:400, opacity: .5
    }, 1000, "linear", function(){alert("all done");} );

האם מידע זה היה מועיל?

כן לא

animate()

.animate( properties, [ duration ], [ easing ], [ callback ])

.animate( properties, [ duration ], [ easing ], [ callback ])

.animate( properties, options )

משך

פונקציה של קריאה חוזרת

הפגה

הפגה על פי תכונות

הערות נוספות:

דוגמאות

דוגמה 1

דוגמה 1 - קוד מלא:

דוגמה 2

דוגמה 2 - קוד מלא:

דוגמה 3

דוגמה 4

דוגמה 5

דוגמה 6

דןגמה 6 - קוד מלא:

דוגמה 7

דוגמה 8

דוגמה 9

דוגמה 10

תגובות