פוסט זה יסביר את היישום המעשי של שיטת ה-fadeOut() של jQuery ליצירת אפקט דהייה חלק.
כיצד ליצור אפקטי Fade-Out חלקים באמצעות שיטת ה-fadeOut() של jQuery?
של jQuery' fadeOut() השיטה מסתירה את האלמנט הנבחר בהדרגה על ידי הפחתת האטימות שלו. שיטה זו משנה את המצב של הרכיב הנבחר מגלוי לנסתר. האלמנט הנסתר אינו מופיע בדף האינטרנט עד שהמשתמש מציג אותו שוב באמצעות ' דועך() ' שיטה.
תחביר
$ ( בוחר ) . FadeOut ( מהירות, הקלה, התקשרות חזרה ) ;
התחביר לעיל תומך בפרמטרים האופציונליים הבאים כדי להתאים אישית את אפקט הדעיכה:
- מְהִירוּת: זה מציין את מהירות אפקט הדהייה באלפיות שניות. כברירת מחדל הערך שלו הוא '400ms'. יתר על כן, הוא תומך גם בשני ערכים מובנים 'איטי' ו'מהיר'.
- הֲפָגָה: זה מראה את מהירות האנימציה הדועכת בנקודות שונות. כברירת מחדל הערך שלו הוא 'תנופה (לאט יותר בהתחלה/בסוף, ואיטי באמצע)'. בנוסף, זה עובד גם על ה'לינארית (מהירות קבועה בהנפשה דהייה)'.
- התקשר חזרה: הוא מגדיר פונקציה המוגדרת על ידי המשתמש שפועלת לאחר השלמת האנימציה הדהייה לביצוע המשימה שהוגדרה.
בואו נשתמש בשיטה שהוגדרה לעיל באופן מעשי.
קוד HTML
לפני המעבר לשיטת 'fadeOut()', עיין בקוד ה-HTML הבא שיוצר רכיב 'div' לדוגמה שעליו יתבצע אפקט ה-fade-out:
< לַחְצָן > FadeOut ( להתחבא אֵלֵמֶנט ) לַחְצָן >< br >< br >< מזהה div = 'myDiv' סִגְנוֹן = 'גובה: 80 פיקסלים; רוחב: 300 פיקסלים; גבול: 2 פיקסלים שחור מלא; שוליים: אוטומטי; יישור טקסט: מרכז' >
< h2 > ברוכים הבאים ל-Linuxhint h2 >
div >
בשורות הקוד לעיל:
- ה ' <כפתור> ' תג מוסיף אלמנט לחצן.
- ה ' ' תג יוצר אלמנט div בעל מזהה 'myDiv', והוא מעוצב בעזרת מאפייני הסגנון הבאים (גובה, רוחב, גבול, שוליים, יישור טקסט).
- בתוך ה-div, ה' ' תג מציין את רכיב כותרת המשנה הראשון של רמה 2.
עכשיו, התחל עם הדוגמה הראשונה.
דוגמה 1: צור אפקטי Fade-Out חלקים עם ערך ברירת המחדל של fadeOut().
הדוגמה הראשונה מסתירה את רכיב ה-div המותאם על ידי שימוש בשיטת 'fadeOut()' עם ערך ברירת המחדל שלו '400ms':
< תַסרִיט >
$ ( מסמך ) . מוּכָן ( פוּנקצִיָה ( ) {
$ ( 'לַחְצָן' ) . נְקִישָׁה ( פוּנקצִיָה ( ) {
$ ( '#myDiv' ) . FadeOut ( ) ;
} ) ;
} ) ;
תַסרִיט >בשורות הקוד לעיל:
- ראשית, ה' מוּכָן() שיטת ” מבצעת את הפונקציות הנתונות כאשר מסמך ה-HTML/DOM הנוכחי נטען.
- לאחר מכן, ה' נְקִישָׁה() שיטת ' מבצעת את הפונקציה המקושרת בלחיצת כפתור כאשר לוחצים על בורר ה'לחצן' המשויך לה.
- לאחר מכן, ה' fadeOut() ' השיטה מסתירה את רכיב ה-div הנגיש שהמזהה שלו הוא 'myDiv' ב-400ms, כלומר ערך ברירת המחדל.
תְפוּקָה
ניתן לראות כי לחיצת הכפתור הנתונה דועכת את אלמנט ה-div בהדרגה ב-'400ms'.
דוגמה 2: צור אפקטי פייד-אאוט חלקים עם הפרמטר 'מהירות' fadeOut()
דוגמה זו משתמשת בשיטת 'fadeOut()' עם הערכים המובנים (איטי/מהיר) של הפרמטר 'מהירות':
< תַסרִיט >
$ ( מסמך ) . מוּכָן ( פוּנקצִיָה ( ) {
$ ( 'לַחְצָן' ) . נְקִישָׁה ( פוּנקצִיָה ( ) {
$ ( '#myDiv' ) . FadeOut ( 'לְהַאֵט' ) ;
} ) ;
} ) ;
תַסרִיט >עכשיו ה ' fadeOut() השיטה עוברת את ' לְהַאֵט ” ערך כפרמטר שלו כדי ליצור בצורה חלקה את אפקט הדעיכה, כלומר משנה את מצב רכיב ה-div שנבחר מגלוי לנסתר.
תְפוּקָה
ניתן לראות שאלמנט ה-div שנבחר מסתתר לאט בלחיצת הכפתור.
דוגמה 3: צור אפקטי Fade-Out חלקים עם הפרמטר 'duration' fadeOut()
דוגמה זו מיישמת את שיטת 'fadeOut()' עם מספר ספציפי של אלפיות שנייה כפרמטר משך הזמן שלה:
< תַסרִיט >
$ ( מסמך ) . מוּכָן ( פוּנקצִיָה ( ) {
$ ( 'לַחְצָן' ) . נְקִישָׁה ( פוּנקצִיָה ( ) {
$ ( '#myDiv' ) . FadeOut ( 6000 ) ;
} ) ;
} ) ;
תַסרִיט >כעת, שיטת 'fadeOut()' משתמשת במספר שצוין של אלפיות שניות כדי להסתיר את האלמנט המותאם במשך הזמן הנתון.
תְפוּקָה
הפלט לעיל מסתיר את השינויים ברכיב ה-div הנתון בלחיצת כפתור במרווח זמן נתון.
דוגמה 4: צור אפקטי Fade-Out חלקים עם הפונקציה 'callback' של fadeOut()
דוגמה זו מבצעת פונקציית callback עם השלמת אפקט ה-fade-out באמצעות שיטת 'fadeOut()':
< תַסרִיט >
$ ( מסמך ) . מוּכָן ( פוּנקצִיָה ( ) {
$ ( 'לַחְצָן' ) . נְקִישָׁה ( פוּנקצִיָה ( ) {
$ ( '#myDiv' ) . FadeOut ( 4000 , פונקציה ( ) {
לְנַחֵם. עֵץ ( 'אלמנט div נתון הסתר בהצלחה!' )
} ) ;
} ) ;
} ) ;
תַסרִיט >בגוש הקוד האמור:
- ה ' fadeOut() ' השיטה דועכת את רכיב ה-div המותאם במספר ספציפי של אלפיות שניות ולאחר מכן מבצעת את פונקציית 'התקשרות חוזרת' שסופקה.
- בתוך ה ' התקשר חזרה פונקציה, ה- console.log() השיטה מיושמת כדי להציג את ההצהרה שצוינה לאחר השלמת אפקט ה'דעיכה'.
תְפוּקָה
ניתן לראות שה'קונסול' מציג הצהרה שהוגדרה בפונקציית ה-callback לאחר הסתרת אלמנט ה-div הנתון.
דוגמה 5: צור אפקטי Fade-Out חלקים עם פרמטר ה-fadeOut() 'הקלה'
דוגמה זו מיישמת את שיטת 'fadeOut()' עם הערכים האפשריים של פרמטר 'הקלה':
< תַסרִיט >
$ ( מסמך ) . מוּכָן ( פוּנקצִיָה ( ) {
$ ( 'לַחְצָן' ) . נְקִישָׁה ( פוּנקצִיָה ( ) {
$ ( '#myDiv' ) . FadeOut ( 4000 , 'ליניארי' ) ;
} ) ;
} ) ;
תַסרִיט >עכשיו ה ' fadeOut() שיטת ' מבצעת את אפקט הדעיכה במספר ספציפי של אלפיות שניות במהירות קבועה בגלל ' ליניארי ' ערך.
תְפוּקָה
הפלט משנה את מצב האלמנט הנתון מגלוי לנסתר במהירות קבועה. זה הכל כדי ליישם את אפקט ה'דעיכה' על האלמנט.
סיכום
כדי ליצור אפקט דהייה חלק באמצעות ה-' של jQuery fadeOut() שיטת ', המשתמש אינו דורש שום פרמטר נוסף. שיטה זו מתפוגגת כלומר מסתירה את האלמנט בהדרגה על ידי שינוי האטימות שלו. אם המשתמש צריך לבצע אפקט דהייה במספר ספציפי של אלפיות שניות, בצע פונקציית callback ולאחר מכן השתמש בפרמטרים 'מהירות', 'הקלה' ו-'callback' בשיטת 'fadeOut()'. פוסט זה הסביר באופן מעשי את שיטת ה-fadeOut() של jQuery ליצירת אפקט דהייה חלק.