التابع .hide() في jQuery
()hide.
الوصف
يخفي هذا التابع كل العناصر المتطابقة.
.hide()
أضيف مع الإصدار: 1.0. لا يقبل هذا الشكل من التابع أي معاملات.
.hide( [duration ] [, complete ] )
أضيف مع الإصدار 1.0.
duration
عدد أو سلسلة نصية تمثل كم من الوقت الذي ستستغرقه عملية إخفاء العنصر، وقيمته الافتراضية هي 400.
complete
دالة تُستدعى بعد انتهاء حركة الإخفاء. تُستدعى مرةً لكل عنصر يراد إخفاؤه.
.hide( options )
أضيف مع الإصدار: 1.0.
Options
كائن من النوع Object، وهو مجموعة من الخيارات الإضافية التي يمكن تمريرها للتابع وهي:
duration
عدد أو سلسلة نصية، ويحدد الوقت الذي ستستغرقه الحركة. قيمته الافتراضية هي 400.
easing
سلسلة نصية، ويحدِّد دالة الانتقال السلس التي ستُسخدَم خلال الحركة. القيمة الافتراضية هي swing.
queue
قيمة منطقية تحدد إذا ما كانت الحركة ستضاف إلى طابور انتظار التأثيرات الحركية. إذا كانت قيمتها false، فإن الحركة ستبدأ مباشرة دون انتظار. بدءًا من الإصدار jQuery 1.7، أصبح هذا الخيار يقبل سلسلة نصية أيضًا، وتضاف في هذه الحالة الحركة إلى طابور النتظار الممثل بتلك السلسلة النصية. عند استعمال اسم طابور انتظار خاص، فإن الحركة لا تبدأ تلقائيًا وإنما يجب عليك استدعاء dequeue("queuename") لبدء الحركة. القيمة الافتراضية هي true.
specialEasing
كائن من النوع Object يحتوي على خاصِّيَّة واحدة أو أكثر من خاصِّيَّات CSS المُعرَّفة بوسيط الخاصِّيَّات (properties argument) ودوال الانتقال السلس المقابلة لها. (أضيف مع الإصدار 1.4).
step
دالة من الشكل Function( Number now, Tween tween )، وتمثل الدالة التي ستُستدعى لكل خاصية تم تحريكها ولكل عنصر تم تحريكه أيضًا. تتيح لنا هذه الدالة الفرصة لتعديل الكائن tween عبر تغيير قيمة الخاصية قبل أن تُضبط.
progress
دالة من الشكل Function( Promise animation, Number progress, Number remainingMs )، وتمثل الدالة التي ستُستدعى بعد كل خطوة من الحركة مرة واحدة فقط لكل عنصر بغض النظر عن عدد الخاصيات التي تم تحريكها. (أضيف مع الإصدار 1.8).
complete
دالة تُستدعى عندما تنتهي الحركة المطبقة على العنصر.
start
دالة تُستدعى عندما تبدأ الحركة المطبقة على العنصر. (أضيف مع الإصدار 1.8).
done
دالة من الشكل Function( Promise animation, Boolean jumpedToEnd )، وتمثل الدالة التي ستُستدعى عندما تنتهي الحركة المطبقة على العنصر. (أضيف مع الإصدار 1.8).
fail
دالة من الشكل Function( Promise animation, Boolean jumpedToEnd )، وتمثل الدالة التي ستُستدعى عندما يفشل تطبيق الحركة على العنصر (رُفِض الكائن Promise). (أضيف مع الإصدار 1.8).
always
دالة من الشكل Function( Promise animation, Boolean jumpedToEnd )، وتمثل الدالة التي ستُستدعى عندما تكتمل الحركة المطبقة على العنصر أو تتوقف دون اكتمال (رُفِض أو قُبِلَ الكائن Promise). (أضيف مع الإصدار 1.8).
.hide( duration [, easing ] [, complete ])
أضيف مع الإصدار: 1.4.3.
duration
عدد أو سلسلة نصية تمثل الوقت الذي ستستغرقه الحركة. القيمة الافتراضية هي 400.
easing
سلسلة نصية ويحدِّد دالة الانتقال السلس التي ستُسخدَم خلال الحركة. القيمة الافتراضية هي swing.
complete
دالة تستدعى عندما تنتهي الحركة المطبقة على العنصر، وتستدعى مرةً على كل عنصر متطابق.
استعمال التابع .hide() دون معاملات هو أبسط طريقة لإخفاء عنصر معين مثل:
$( ".target" ).hide();
ستختفي العناصر المطابقة مباشرة بلا حركة. هذا مكافئ لاستدعاء .css( "display", "none" )، باستثناء أن قيمة الخاصية display تخزن في ذاكرة البيانات المؤقتة في jQuery وبهذا يمكن استعادة قيمتها الأولية. إن كانت قيمة الخاصية display هي القيمة inline لعنصر ما وأُخفي ثم أُظهر مرة أخرى، فسيُظهر آنذاك بنفس قيمة خاصية display الأولية والتي هي inline.
عندما تُمرَّر قيمة المعامل duration أو كائن من نوع object أو دالة complete إلى التابع .hide()، فيصبح هذا التابع تابعًا حركيًا. يحرك التابع .hide() طول وعرض وشفافية العناصر المطابقة في الوقت ذاته. عندما تصل هذه الخاصيات إلى القيمة 0، تضبط الخاصية display إلى القيمة none لضمان أنه لم يعد للعنصر أي تأثير على بنية الصفحة.
تعطى قيمة المعامل duration بالميلي ثانية، وكلما كانت قيمة هذا المعامل أكبر، استغرقت الحركات وقتًا أطول. يمكن أن يكون هذا المعامل سلسلة نصية أيضا مثل 'fast' التي تكافئ 200 ميلي ثانية و 'slow' التي تكافئ 600 ميلي ثانية.
يجب الإنتباه إلى أن التابع .hide() سيُنفَّذ مباشرةً ولن ينتظر طابور انتظار الحركات إن لم تُمرر قيمة المعامل duration له أو إن مُررت ولكن كانت 0.
بدءًا من الإصدار jQuery 1.4.3، يمكن استخدام سلسلة نصية اختياريَّة لتسمية دالة الحركة السلسة. تُستعمَل دوال الحركة السلسة لتغيير السرعة في نقاط مختلفة داخل الحركة أثناء تقدم عملية التحريك. دوال الانتقال السلس الوحيدة المبنية في jQuery هي الدالة الافتراضيَّة swing وأخرى تتحرك بسرعة ثابت تدعى linear. هناك دوال انتقال سلس أخرى يمكننا الحصول عليها باستعمال الإضافات، ومن أهمها الإضافة jQuery UI suite.
إن مرر تابع رد نداء callback، فسيُستدعى هذا التابع مباشرة بعد انتهاء الحركة. لايقبل التابع callback أي معاملات، ولكن يمكن استعمال this داخله فهو يشير إلى عنصر DOM الذي يُحرَّك. إن شملت الحركة مجموعة من العناصر، فمن المهم أن نشير إلى أن دالة callback تُنفَّذ مرةً لكل عنصر مطابق، وليس مرةً واحدةً للحركة ككل.
ملاحظة: يمكن أن يسبب هذا التابع مشاكل في الأداء، خصوصًا عندما يُستعمل مع مجموعة من العناصر. إن واجهت مشاكل من هذا القبيل، فاستعمل أدوات قياس الأداء كي تعرف هل فعلًا التابع .hide() هو المسبب لتلك المشاكل. أضف إلى ذلك أنه يمكن أن يُسبب هذا التابع مشاكل مع التصميم المتجاوب إذا ما كانت قيمة الخاصية display تتغير بتغير قياس الشاشة.
يمكن تحريك أي عنصر مثل صورة بسيطة:
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
شيفرة jQuery:
// إخفاء العنصر ببطئ
$( "#clickme" ).click(function() {
$( "#book" ).hide( "slow", function() {
alert( "Animation complete." );
});
});
ملاحظات إضافية
يمكن إيقاف كل تأثيرات jQuery، من ضمنها .hide()، باستعمال الضبط jQuery.fx.off = true والذي يغير بفاعلية المعامل duration إلى 0. لمعلومات أكثر، اطلع على jQuery.fx.off.
أمثلة
إخفاء كل الفقرات ثم إخفاء الرابط عند الضغط عليه:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hide demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hello</p>
<a href="#">Click to hide me too</a>
<p>Here is another paragraph</p>
<script>
$( "p" ).hide();
$( "a" ).click(function( event ) {
event.preventDefault();
$( this ).hide();
});
</script>
</body>
</html>
إخفاء كل الفقرات المرئية ببطء، إذ ستكتمل الحركة بعد مرور 600 ميلي ثانية:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hide demo</title>
<style>
p {
background: #dad;
font-weight: bold;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button>Hide 'em</button>
<p>Hiya</p>
<p>Such interesting text, eh?</p>
<script>
$( "button" ).click(function() {
$( "p" ).hide( "slow" );
});
</script>
</body>
</html>
إخفاء كل عناصر <span> بشكل سريع، إذ تستغرق كل حركة 200 ميلي ثانية. عندما تنتهي حركة معينة تبدأ التي تليها:
!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hide demo</title>
<style>
span {
background: #def3ca;
padding: 3px;
float: left;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="hider">Hide</button>
<button id="shower">Show</button>
<div>
<span>Once</span> <span>upon</span> <span>a</span>
<span>time</span> <span>there</span> <span>were</span>
<span>three</span> <span>programmers...</span>
</div>
<script>
$( "#hider" ).click(function() {
$( "span:last-child" ).hide( "fast", function() {
// Use arguments.callee so we don't need a named function
$( this ).prev().hide( "fast", arguments.callee );
});
});
$( "#shower" ).click(function() {
$( "span" ).show( 2000 );
});
</script>
</body>
</html>
إخفاء عناصر <div> عند الضغط عليها (تستغرق الحركة ثانيتين)، ثم حذف العنصر بعد ذلك من الصفحة. جرب الضغط على أكثر من عنصر <div> في نفس الوقت:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hide demo</title>
<style>
div {
background: #ece023;
width: 30px;
height: 40px;
margin: 2px;
float: left;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div></div>
<script>
for ( var i = 0; i < 5; i++ ) {
$( "<div>" ).appendTo( document.body );
}
$( "div" ).click(function() {
$( this ).hide( 2000, function() {
$( this ).remove();
});
});
</script>
</body>
</html>