רקע קצר לאלה המבינים קצת פחות, Jquery היא למעשה ספרייה של Java Script שמכילה בתוכנה פונקציות מוכנות מראש שיודעות לעבוד עם אובייקים קיימים של HTML או כל אובייקט JS אחר. היתרון הענק בספרייה הוא שהכל מוכן וכתוב, לכל דבר יש דוגמאות באינטרנט ויש עוד עשרות אלפי ספריות נוספות שיודעות להתממשק לספריה המקורית ולעשות הנפשות ודברים נוספים מרהיבים.
CSS 3.0 היא למעשה אותה ספרייה במהותה האחראית על ה Style (מיקומים, צבעים, גדלים) של אובייקיטים באתרי אינטרנט, בין אם זה הצבע של שדה טקסט שמשתנה שעומדים עליו, כפתור שגדל או משנה צבע וכדומה, רוב ההנפשות נעשות באמצעות CSS. החלק החדש בגרסת ה 3 – הוא כל נושא ההנפשות והתאמה של רזולוציות וסטייל לאתרים רספונסיביים (אבל בזה לא נעסוק היום).
אם כך, יש לנו שתי טכנולוגיות שיודעות לעשות הנפשות, באיזו מהם כדאי לנו יותר להשתמש?
ההמלצה שלי היא ללא ספק – אם אפשר להשתמש ב CSS 3.0 במקרים של Hover (כאשר העכבר מופיע על משהו) או פוקוס אז כדאי להשתמש ב CSS. מדוע?
כאשר משתמשים ב CSS ניתן להגדיר את אופן הפעולה ככזה שמתרחש פעם אחת בלבד ובהדרגה, זאת אומרת שאם נעביר את העכבר הלוך ושוב כמה פעמים על תמונה שצריכה לגדול מתי שהעכבר עליה ולהיות קטנה יותר שהעכבר יורד ממנה, מה שיקרה בהנפשת CSS זה פשוט גדילה רגעית והקטנה מיידית כפי שהוגדר, לעומת זאת ב JQUERY ישוגרו פקודות הגדלה והקטנה מספר פעמים ומה שנראה בפועל יהיה הגדלה, הקטנה, הגדלה, הקטנה, הגדלה, הקטנה – כמספר הפעמים שהעכבר עבר על התמונה.
מדוע זה קורה?
ב CSS מוגדרים שני מצבים:
- איך האובייקט נראה באופן רגיל.
- איך האובייקט נראה שמשהו קורה (עכבר עליו, פוקוס וכד’)
ניתן להגדיר תוך כמה זמן האובייקט ישתנה מצורה 1 לצורה 2.
לכן כאשר קורה מה שצריך לקרות מתחיל השינוי ואילו שמפסיק לקרות מפסיק השינוי ולא חוזר שוב ושוב.
ב JQUERY מוגדרים אירועים, לדוגמא:
- כאשר העכבר עובר על אובייקט X תתחיל לעשות כך :שנה כל שניה את הגודל של האובייקט ב 10 פיקסלים עד שהרוחב שלו יהיה 400 פיקלסים.
- מרגע מעבר העכבר הפעולה מתחילה לרוץ עד שהיא מסתיימת בנקודת העצירה, אם עברו עם העכבר 20 פעמים על האובייקט הפעולה תבוצע 20 פעמים – מה שקיבלנו היא הנפשה מוגזמת ולא רצונית.
לסיכום
אם אפשר לעשות את אותן ההנפשות גם ב CSS וגם ב JQUERY אני ממליץ בחום לעשות את ההנפשות ב CSS.
שיהיה המון בהצלחה!
נכתב ע”י: אלעד בן שמואל