אנימציות 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'});
});
אהבתם? לא אהבתם? דרגו!
0 הצבעות, ממוצע 0 מתוך 5 כוכבים
המדריכים באתר עוסקים בנושאי תכנות ופיתוח אישי. הקוד שמוצג משמש להדגמה ולצרכי לימוד. התוכן והקוד המוצגים באתר נבדקו בקפידה ונמצאו תקינים. אבל ייתכן ששימוש במערכות שונות, דוגמת דפדפן או מערכת הפעלה שונה ולאור השינויים הטכנולוגיים התכופים בעולם שבו אנו חיים יגרום לתוצאות שונות מהמצופה. בכל מקרה, אין בעל האתר נושא באחריות לכל שיבוש או שימוש לא אחראי בתכנים הלימודיים באתר.
למרות האמור לעיל, ומתוך רצון טוב, אם נתקלת בקשיים ביישום הקוד באתר מפאת מה שנראה לך כשגיאה או כחוסר עקביות נא להשאיר תגובה עם פירוט הבעיה באזור התגובות בתחתית המדריכים. זה יכול לעזור למשתמשים אחרים שנתקלו באותה בעיה ואם אני רואה שהבעיה עקרונית אני עשוי לערוך התאמה במדריך או להסיר אותו כדי להימנע מהטעיית הציבור.
שימו לב! הסקריפטים במדריכים מיועדים למטרות לימוד בלבד. כשאתם עובדים על הפרויקטים שלכם אתם צריכים להשתמש בספריות וסביבות פיתוח מוכחות, מהירות ובטוחות.
המשתמש באתר צריך להיות מודע לכך שאם וכאשר הוא מפתח קוד בשביל פרויקט הוא חייב לשים לב ולהשתמש בסביבת הפיתוח המתאימה ביותר, הבטוחה ביותר, היעילה ביותר וכמובן שהוא צריך לבדוק את הקוד בהיבטים של יעילות ואבטחה. מי אמר שלהיות מפתח זו עבודה קלה ?
השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.