פוסט זה מדגיש את ההבדלים העיקריים בין hide() ו-fadeOut(), show() ו-fadeIn() ב-jQuery.
לפני שתעבור להבדל בין hide() ל-fadeOut(), show() ו-fadeIn() ב-jQuery, תראה תחילה את היסודות של שיטות אלה על ידי קריאת המדריכים הבאים:
- שיטת fadeIn() של jQuery
- שיטת fadeOut() של jQuery
- JavaScript JQuery Hide() שיטה | הסביר
- שיטת JQuery Show() | הסביר
ראשית, ראה את ההבדל בין שיטות hide() ו-fadeOut() ב-jQuery.
הבדל בין hide() ל-fadeOut() ב-jQuery
ההבדל העיקרי האחד והיחיד בין ' להתחבא() ' ו' fadeOut() השיטה היא:
- מרווח זמן : ה ' להתחבא() שיטת ' כברירת מחדל מסתירה את האלמנט על ידי שינוי האטימות שלו מ-100 ל-0 באופן מיידי מבלי לצרוך כל מרווח זמן, ואילו ' fadeOut() ' השיטה מתפוגגת, כלומר הסתר את האלמנט בהדרגה ב-'400ms' שהוא ערך ברירת המחדל שלו.
בואו נראה את היישום המעשי של ההבדל המוצהר.
תסתכל תחילה על קוד ה-HTML הבא:
< מֶרְכָּז >< h2 מזהה = 'H2' > ברוכים הבאים ל-Linuxhint ! h2 >
< לַחְצָן > הסתר אלמנט לַחְצָן >
מֶרְכָּז >
בשורות הקוד לעיל:
- ה ' <מרכז> 'תג מתאים את היישור של האלמנטים הנתונים במרכז דף האינטרנט.
- ה ' 'תג יוצר כותרת משנה ברמה 2 עם מזהה 'H2'.
- ה ' <כפתור> ' תג מוסיף כפתור חדש.
הערה: קוד ה-HTML לעיל מלווה לאורך כל המדריך הזה.
דוגמה: החלת שיטת jQuery 'hide()' עם ערך 'ברירת מחדל'.
דוגמה זו מחילה את ה-'hide()' עם ערכי ברירת המחדל שלו כדי להסתיר אלמנט:
< תַסרִיט >$ ( מסמך ) . מוּכָן ( פוּנקצִיָה ( ) {
$ ( 'לַחְצָן' ) . נְקִישָׁה ( פוּנקצִיָה ( ) {
$ ( '#H2' ) . להתחבא ( ) ;
} ) ;
} ) ;
תַסרִיט >
בשורות הקוד לעיל:
- ראשית, ה' מוּכָן() שיטת ” מיושמת לביצוע הפונקציות שצוינו כאשר מסמך ה-HTML הנוכחי נטען.
- לאחר מכן, ה' נְקִישָׁה() השיטה אחראית לביצוע הפונקציה המקושרת בלחיצת כפתור.
- לאחר מכן, ה' להתחבא() ' השיטה מסתירה את רכיב הכותרת הנגיש מיד שהמזהה שלו הוא 'H2'.
תְפוּקָה
ניתן לראות שאלמנט הכותרת מסתתר מיד בלחיצת הכפתור.
דוגמה: החלת שיטת jQuery 'fadeOut()' עם ערך 'ברירת מחדל'.
דוגמה זו משתמשת בשיטת 'fadeOut()' עם ערכי ברירת המחדל שלה כדי להסתיר בהדרגה את האלמנט הנתון ב-'400ms'.
בתרחיש זה משתנה התוכן של אלמנט ה'כפתור':
< לַחְצָן > FadeOut ( להתחבא אֵלֵמֶנט ) לַחְצָן >כעת יישם את שיטת 'fadeOut()' בצורה זו:
< תַסרִיט >$ ( מסמך ) . מוּכָן ( פוּנקצִיָה ( ) {
$ ( 'לַחְצָן' ) . נְקִישָׁה ( פוּנקצִיָה ( ) {
$ ( '#H2' ) . FadeOut ( ) ;
} ) ;
} ) ;
תַסרִיט >
בשלב זה, ה' fadeOut() השיטה מיושמת כדי לדעוך את רכיב הכותרת הנגיש עם 400ms, כלומר ערך ברירת המחדל.
תְפוּקָה
הפלט מראה בבירור שלחיצת הכפתור הנתונה מסתירה את רכיב הכותרת בהדרגה במרווח הזמן המוגדר כברירת מחדל, כלומר '400ms'.
הבדיל בין show() ל-fadeIn() ב-jQuery
בדומה לשיטות 'hide()' ו-'fadeOut()', אותו הבדל הוא בין השיטה 'show()' ו-'fadeIn()':
- מרווח זמן : ה ' הופעה() שיטת ' כברירת מחדל מציגה את האלמנט הנסתר על ידי שינוי האטימות שלו מ-0 ל-100 באופן מיידי, ואילו ' דועך() השיטה מציגה את האלמנט הנסתר בהדרגה ב-'400ms' שהוא ערך ברירת המחדל שלו.
דוגמה: החלת שיטת jQuery 'show()' עם ערך 'ברירת מחדל'.
דוגמה זו מיישמת את 'show()' עם ערכי ברירת המחדל שלו כדי להציג את האלמנט הנסתר.
הסתכל תחילה על בלוק קוד ה-HTML שסופק:
< מֶרְכָּז >< לַחְצָן > הצג אלמנט לַחְצָן >
< h2 מזהה = 'H2' סִגְנוֹן = 'אל תציג דבר' > ברוכים הבאים ל-Linuxhint ! h2 >
מֶרְכָּז >
על פי תרחיש זה, אלמנט הכותרת הנתון מוסתר בעזרת ' אל תציג דבר ' תכונה.
כעת, עקוב אחר גוש הקוד הנתון כדי להבין את היישום המעשי של שיטת 'show()':
< תַסרִיט >$ ( מסמך ) . מוּכָן ( פוּנקצִיָה ( ) {
$ ( 'לַחְצָן' ) . נְקִישָׁה ( פוּנקצִיָה ( ) {
$ ( '#H2' ) . הופעה ( ) ;
} ) ;
} ) ;
תַסרִיט >
בלוק הקוד לעיל משתמש ב-' הופעה() ' שיטה להצגת האלמנט המוסתר שנוסף באופן מיידי.
תְפוּקָה
ניתן לראות כי לחיצת הכפתור מציגה את אלמנט הכותרת המוסתר באופן מיידי.
דוגמה: החלת שיטת jQuery 'fadeIn()' עם ערך 'ברירת מחדל'.
דוגמה זו מציגה את האלמנט הנסתר באמצעות שיטת 'fadeIn()' עם ערך ברירת המחדל ' 400 אלפיות השנייה ”:
הטקסט של רכיב הכפתור משתנה בהתאם לתרחיש הנתון:
< לַחְצָן > דועך ( הופעה אֵלֵמֶנט ) לַחְצָן >כעת, החל את ' דועך() שיטה באמצעות בלוק הקוד הבא:
< תַסרִיט >$ ( מסמך ) . מוּכָן ( פוּנקצִיָה ( ) {
$ ( 'לַחְצָן' ) . נְקִישָׁה ( פוּנקצִיָה ( ) {
$ ( '#H2' ) . דועך ( ) ;
} ) ;
} ) ;
תַסרִיט >
בגוש קוד זה, ' דועך() השיטה משמשת כדי להציג את האלמנט הנסתר המותאם למזהה 'H2' ב-400ms, כלומר ערך ברירת המחדל.
תְפוּקָה
ניתן לראות כי לחיצה על הכפתור הנתונה מציגה את האלמנט הנסתר בהדרגה במרווח הזמן המוגדר כברירת מחדל, כלומר '400ms'.
סיכום
ב-jQuery, ההבדל העיקרי היחיד בין להתחבא() ו fadeOut() , הופעה() , ו דועך() השיטה היא ' מרווח זמן '. השיטה 'show()' ו-'hide()' מבצעת את הפונקציות שלהם באופן מיידי כברירת מחדל, בעוד ששיטת 'fadeIn()', ו-'fadeOut()' מבצעת את המשימות שלהם במרווח הזמן המוגדר כברירת מחדל, כלומר '400ms'. פוסט זה הסביר באופן מעשי את ההבדלים העיקריים בין hide() ו-fadeOut(), show() ו-fadeIn() ב-jQuery.