يسلط هذا المنشور الضوء على الاختلافات الرئيسية بين إخفاء() وfadeOut() وshow() وfadeIn() في jQuery.
قبل الانتقال إلى الفرق بين إخفاء() وfadeOut() وshow() وfadeIn() في jQuery، انظر أولاً إلى أساسيات هذه الطرق من خلال قراءة الإرشادات التالية:
- طريقة FadeIn () الخاصة بـ jQuery
- طريقة FadeOut () الخاصة بـ jQuery
- طريقة جافا سكريبت JQuery Hide () | شرح
- طريقة عرض JQuery () | شرح
أولاً، تعرف على الفرق بين طريقتي إخفاء() و FadeOut() في jQuery.
التفريق بين إخفاء() و FadeOut() في jQuery
الفرق الرئيسي الوحيد بين ' يخفي() ' و ' تتآكل() 'الطريقة هي:
- الفاصل الزمني : ال ' يخفي() 'يقوم الأسلوب بشكل افتراضي بإخفاء العنصر عن طريق تغيير عتامة العنصر من 100 إلى 0 على الفور دون استهلاك أي فاصل زمني، في حين أن '' تتآكل() 'طريقة Fattle أي إخفاء العنصر تدريجيًا في '400ms' وهي القيمة الافتراضية له.
دعونا نرى التنفيذ العملي للفرق المذكور.
ألق نظرة أولاً على كود HTML التالي:
< مركز >< معرف h2 = 'H2' > مرحبًا بك في لينكسشينت ! h2 >
< زر > إخفاء العنصر زر >
مركز >
في سطور الكود أعلاه:
- ال ' <المركز> تقوم العلامة بضبط محاذاة العناصر المحددة في وسط صفحة الويب.
- ال ' تنشئ العلامة 'عنوانًا فرعيًا من المستوى 2 بمعرف 'H2'.
- ال ' <زر> تقوم العلامة بإدراج زر جديد.
ملحوظة: يتم اتباع كود HTML أعلاه خلال هذا الدليل.
مثال: تطبيق طريقة jQuery 'hide()' بقيمة 'Default'.
يطبق هذا المثال 'hide()' بقيمه الافتراضية لإخفاء عنصر:
< النصي >$ ( وثيقة ) . مستعد ( وظيفة ( ) {
$ ( 'زر' ) . انقر ( وظيفة ( ) {
$ ( '#H2' ) . يخفي ( ) ;
} ) ;
} ) ;
النصي >
في سطور الكود أعلاه:
- أولاً، ' مستعد() يتم تطبيق الطريقة لتنفيذ الوظائف المحددة عند تحميل مستند HTML الحالي.
- التالي ' انقر() 'الطريقة مسؤولة عن تنفيذ الوظيفة المرتبطة عند النقر على الزر.
- وبعد ذلك ' يخفي() 'يخفي الأسلوب عنصر العنوان الذي تم الوصول إليه فورًا والذي يكون معرفه 'H2'.
انتاج |
يمكن ملاحظة أن عنصر العنوان يختفي فور النقر على الزر.
مثال: تطبيق أسلوب jQuery 'fadeOut()' بقيمة 'افتراضية'.
يستخدم هذا المثال طريقة 'fadeOut()' بقيمها الافتراضية لإخفاء العنصر المحدد تدريجيًا في '400ms'.
في هذا السيناريو يتغير محتوى عنصر 'الزر':
< زر > تتآكل ( يخفي عنصر ) زر >الآن قم بتنفيذ طريقة 'fadeOut()' بهذه الطريقة:
< النصي >$ ( وثيقة ) . مستعد ( وظيفة ( ) {
$ ( 'زر' ) . انقر ( وظيفة ( ) {
$ ( '#H2' ) . تتآكل ( ) ;
} ) ;
} ) ;
النصي >
في هذا الوقت ' تتآكل() يتم تطبيق الطريقة لتلاشي عنصر العنوان الذي تم الوصول إليه بقيمة 400 مللي ثانية، أي القيمة الافتراضية.
انتاج |
يُظهر الإخراج بوضوح أن النقر على الزر المحدد يخفي عنصر العنوان تدريجيًا في الفاصل الزمني الافتراضي، أي '400 مللي ثانية'.
التفريق بين show() و FadeIn() في jQuery
على غرار طريقتي 'hide()' و'fadeOut()'، يوجد نفس الفرق بين طريقتي 'show()' و'fadeIn()':
- الفاصل الزمني : ال ' يعرض() تعرض الطريقة 'افتراضيًا العنصر المخفي عن طريق تغيير عتامة العنصر من 0 إلى 100 على الفور، في حين أن الطريقة ' اختفي() ' تقوم الطريقة بإظهار العنصر المخفي تدريجياً في '400ms' وهي قيمته الافتراضية.
مثال: تطبيق طريقة jQuery 'show()' بقيمة 'Default'.
يطبق هذا المثال 'show()' بقيمه الافتراضية لعرض العنصر المخفي.
ألق نظرة أولًا على مقطع تعليمات HTML البرمجية المقدم:
< مركز >< زر > إظهار العنصر زر >
< معرف h2 = 'H2' أسلوب = 'عرض لا شيء' > مرحبًا بك في لينكسشينت ! h2 >
مركز >
وفقًا لهذا السيناريو، يتم إخفاء عنصر العنوان المحدد بمساعدة ' عرض لا شيء ' ملكية.
الآن، اتبع مقطع التعليمات البرمجية المحدد لفهم التنفيذ العملي لطريقة 'show()':
< النصي >$ ( وثيقة ) . مستعد ( وظيفة ( ) {
$ ( 'زر' ) . انقر ( وظيفة ( ) {
$ ( '#H2' ) . يعرض ( ) ;
} ) ;
} ) ;
النصي >
تستخدم كتلة التعليمات البرمجية أعلاه ' يعرض() 'طريقة لعرض العنصر المخفي المضاف على الفور.
انتاج |
يمكن ملاحظة أن النقر على الزر يظهر عنصر العنوان المخفي على الفور.
مثال: تطبيق أسلوب jQuery 'fadeIn()' بقيمة 'افتراضية'.
يوضح هذا المثال العنصر المخفي باستخدام طريقة 'fadeIn()' بالقيمة الافتراضية ' 400 مللي ثانية ':
يتم تغيير نص عنصر الزر وفقًا للسيناريو المحدد:
< زر > اختفي ( يعرض عنصر ) زر >الآن قم بتطبيق ' اختفي() ' الطريقة باستخدام كتلة التعليمات البرمجية التالية:
< النصي >$ ( وثيقة ) . مستعد ( وظيفة ( ) {
$ ( 'زر' ) . انقر ( وظيفة ( ) {
$ ( '#H2' ) . اختفي ( ) ;
} ) ;
} ) ;
النصي >
في كتلة التعليمات البرمجية هذه، ' اختفي() يتم استخدام الطريقة لإظهار العنصر المخفي المطابق للمعرف 'H2' في 400 مللي ثانية، أي القيمة الافتراضية.
انتاج |
يمكن ملاحظة أن النقر على الزر المحدد يظهر العنصر المخفي تدريجيًا في الفاصل الزمني الافتراضي، أي '400 مللي ثانية'.
خاتمة
في jQuery، الفرق الرئيسي الوحيد بين يخفي() و تتآكل() , يعرض() ، و اختفي() الطريقة هي ' الفاصل الزمني '. تؤدي الطريقة 'show()' و'hide()' وظائفها على الفور بشكل افتراضي، في حين تؤدي الطريقة 'fadeIn()' و'fadeOut()' مهامها في الفاصل الزمني الافتراضي، أي '400ms'. أوضحت هذه المقالة عمليًا الاختلافات الرئيسية بين إخفاء() وfadeOut() وshow() وfadeIn() في jQuery.