נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

אנימציות jQuery באמצעות animate

מחבר:
בתאריך:

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

דוגמה ראשונה ליכולות של animate

טקסט שמדגים animate

הקוד שייצר את מה שאני מדגים למעלה הוא הקוד הבא:

$('button').on('click', function(){
 $('.animate1').animate({
     width: '500px',
     height: '120%',
     'border-width': '5px',
     'margin-right': '20px',
     'font-size': '1em',
     'letter-spacing': '1em'
});
});

כדאי לשים לב לדברים הבאים:

מבנה הקוד:

$('selector').animate(תכונות) 


התכונות הם תכונות של CSS שיש להם ערכים מספריים, כשניתן לעשות את השינוי ביחידות של אחוזים, פיקסלים או em. במקרים שבהם התכונה מורכבת משתי מילים צריך להקיף בגרשיים. לדוגמה 'margin-right'. 

 

קביעת משך הזמן של animate

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

$('.animate1').animate({
   width: '500px',
},400);

מיד אחרי התכונות מודגש בכחול משך הזמן שצריך לארוך האפקט, ובמקרה זה 400 מילי-שניות (בדרך כלל 200-500 שניות נחשב לזמן טוב לאפקט שלא ירגיז את הגולש). קביעת משך הזמן של האפקט אינה הכרחית.

 

callback שקורא לפונקציה נוספת אחרי שהאפקט מסיים

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

$('button').on('click', function(){
animate1 = $('.animate1');
animate1.animate({
    width: '500px',
    height: '120%',
    'border-width': '5px',
    'margin-right': '20px',
    'font-size': '1em',
    'letter-spacing': '1em'
 },400, function(){
              animate1.css({'border-color':'red', 'background':'orange', 'color':'black'});
              });
});

טקסט שמדגים animate

בכחול מודגשת פונקציית ה-callback, שצריכה להתבצע בסוף האנימציה. עוד דבר שעשיתי הוא לאחסן בזיכרון את animate1 (מודגש באדום), האלמנט שעליו פועלות המתודות, כדי לחסוך במשאבי מערכת.

 

כיצד לשרשר אנימציות?

ניתן לשרשר אנימציות, כפי שניתן לשרשר כל פקודה אחרת של jQuery, כשבין הפקודות צריכה לבוא נקודה. נראה את הדוגמה הבאה:

$('button').on('click', function(){
 .animate({ width: '360px' ,height: '120%'},400)
 .animate({ width: '180px',height: '100%'},400)
 .css({'background':'orange', 'border-color':'red', 'color':'black'});
});

טקסט שמדגים animate

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

$('button').on('click', function(){
 .animate({ width: '360px' ,height: '120%'},400)
 .animate({ width: '180px',height: '100%'},400)
.delay(500)
 .css({'background':'orange', 'border-color':'red', 'color':'black'});
});

למדריך הבא בסדרת ה-jQuery

לכל מדריכי ה-jQuery

הוסף תגובה חדשה

 

= 6 + 8