عرض مصدر jQuery/fadeOut

<noinclude>{{DISPLAYTITLE:التابع <code>‎.fadeOut()‎‎‎‎‎‎‎‎‎‎‎</code>‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ في jQuery}}</noinclude>
==<code>‎.fadeOut( [duration ] [, complete ] )‎</code>==
===القيمة المعادة===
يُعيد كائنًا من النوع [[JQuery/jQuery/|jQuery]].
===الوصف===
يُخفي هذا التابع العناصر المطابقة عن طريق تحويلها إلى شفافة تدريجيًا.
===<code>‎.fadeOut( [duration ] [, complete ] )‎</code>===
أُضيف مع الإصدار: [http://api.jquery.com/category/version/1.0 1.0].
====<code>duration</code> (القيمة الافتراضية: <code>400</code>)====
مدة الحركة وهو من النوع عدد [[JavaScript/Number|Number]] أو سلسلة نصية [[JavaScript/String|String]].
====<code>complete</code>====
دالة على الشكل [[JavaScript/Function|Function()]]‎، تُستدعى بمجرد اكتمال الحركة، وتُستدعى مرة واحدة لكل عنصر مطابق.
===<code>‎.fadeOut( options )‎</code>===
أُضيف مع الإصدار: [http://api.jquery.com/category/version/1.0 1.0].
====<code>options</code>====
كائن من النوع [[JavaScript/Object|Object]]، ويقدم مجموعة من الخيارات الإضافية لتمريرها إلى التابع.
=====<code>duration</code> (القيمة الافتراضية: <code>400</code>)=====
مدة الحركة وهو من النوع عدد [[JavaScript/Number|Number]] أو سلسلة نصية [[JavaScript/String|String]].
=====<code>easing</code> (القيمة الافتراضية: <code>swing</code>)=====
سلسلة نصية من النوع [[JavaScript/String|String]]، تُشير إلى دالة التخفيف المستخدمة في عملية التحوّل.
=====<code>queue</code> (القيمة الافتراضية: <code>true</code>)=====
قيمة منطقية [[JavaScriptBoolean|Boolean]] تُشير إلى ما إذا كان الحركة ستندرج في قائمة انتظار التأثيرات، وهي من النوع [[JavaScriptBoolean|Boolean]] أو [[JavaScript/String|String]]. إذا كانت قيمتها <code>false</code>، فستبدأ الحركة على الفور. كذلك يمكن، بدءًا من الإصدار jQuery [http://api.jquery.com/category/version/1.7 1.7]، أن يقبل خيار <code>queue</code> سلسلة نصية، وفي هذه الحالة تضاف الحركة إلى قائمة الانتظار التي تمثلها تلك السلسلة. عند استخدام اسم قائمة انتظار مخصصة لا تبدأ الحركة تلقائيًا؛ فيجب عليك استدعاء ‎<code>[[JQuery/dequeue|.dequeue("queuename")‎]]</code> لبدء تشغيله.
=====<code>specialEasing</code>=====
وهو كائن من النوع [[JavaScript/Object|Object]]، يحتوي على واحد أو أكثر من خصائص CSS المعرفة بواسطة وسيط الخصائص ودوال التخفيف المقابلة. (أُضيف مع الإصدار: [http://api.jquery.com/category/version/1.4 1.4]).
=====<code>step</code>=====
دالة على الشكل <code>[[JavaScript/Function|Function]]( [[JavaScript/Number|Number]] now, Tween tween )‎</code>، تُستدعى لكل خاصية تحريك لكل عنصر متحرك. توفر هذه الدالة فرصة لتعديل الكائن <code>Tween</code> لتغيير قيمة الخاصية قبل ضبطها.
=====<code>progress</code>=====
دالة على الشكل [[JavaScript/Function|Function]]( [[JavaScript/Promise|Promise]] animation, [[JavaScript/Number|Number]] progress, [[JavaScript/Number|Number]] remainingMs )‎، تُستدعى بعد كل خطوة من الحركات، مرة واحدة فقط لكل عنصر متحرك بغض النظر عن عدد الخصائص المتحركة. (أُضيفت مع الإصدار: [http://api.jquery.com/category/version/1.8 1.8] ).
=====<code>complete</code>=====
دالة على الشكل <code>[[JavaScript/Function|Function]]</code>()‎، تُستدعى مرة واحدة عند اكتمال حركة العنصر.
=====<code>start</code>=====
دالة على الشكل <code>[[JavaScript/Function|Function]]</code>( [[JavaScript/Promise|Promise]] animation )‎، تُستدعى عند بدء حركة عنصر ما. (أُضيفت مع الإصدار: [http://api.jquery.com/category/version/1.8 1.8] ).
=====<code>done</code>=====
دالة على الشكل <code>[[JavaScript/Function|Function]]( [[JavaScript/Promise|Promise]] animation, [[JavaScriptBoolean|Boolean]] jumpedToEnd )</code>‎، تُستدعى عند اكتمال حركة العنصر (قبول كائن <code>[[JavaScript/Promise|Promise]]</code> الخاص بها). (أُضيفت مع الإصدار: [http://api.jquery.com/category/version/1.8 1.8]).
=====<code>fail</code>=====
دالة على الشكل <code>[[JavaScript/Function|Function]]( [[JavaScript/Promise|Promise]] animation, [[JavaScriptBoolean|Boolean]] jumpedToEnd )</code>، تُستدعى عند فشل إكمال حركة العنصر (رفض الكائن <code>[[JavaScript/Promise|Promise]]</code> الخاص بها). (أُضيفت مع الإصدار: [http://api.jquery.com/category/version/1.8 1.8]).
=====<code>always</code>=====
دالة على الشكل <code>[[JavaScript/Function|Function]]( [[JavaScript/Promise|Promise]] animation, [[JavaScriptBoolean|Boolean]] jumpedToEnd )</code>، تُستدعى عند اكتمال حركة عنصر أو توقفها دون إتمامها (إما أن يكون كائن <code>[[JavaScript/Promise|Promise]]</code> قد قُبِل أو رُفِض). (أُضيف مع الإصدار: [http://api.jquery.com/category/version/1.8 1.8] ).
===<code>‎.fadeOut( [duration ] [, easing ] [, complete ] )‎</code>===
أُضيف مع الإصدار: [http://api.jquery.com/category/version/1.4.3 1.4.3].
====<code>duration</code> (القيمة الافتراضية: <code>400)</code>====
مدة الحركة وهو من النوع عدد [[JavaScript/Number|Number]] أو سلسلة نصية [[JavaScript/String|String]].
====<code>easing</code> (القيمة الافتراضية: <code>swing</code>)====
سلسلة نصية من النوع [[JavaScript/String|String]]، تُشير إلى دالة التخفيف المستخدمة في عملية التحوّل.
====<code>complete</code>====
دالة على الشكل <code>[[JavaScript/Function|Function]]()‎</code>،  تُستدعى بمجرد اكتمال الحركة، وتُستدعى مرة واحدة لكل عنصر مطابق.

يُحرك التابع <code>‎.fadeOut()‎</code> عتامة العناصر المُطابقة. وبمجرد وصول العتامة إلى 0، تُضبط خاصية نمط <code>display</code> إلى <code>none</code>، بحيث لا يبقى تأثير للعنصر على تخطيط الصفحة.

تُعطى المدد بالمللي ثانية، وتُشير القيم الأعلى إلى حركة أبطأ، وليس أسرع. يمكن إدخال السلاسل النصية '<code>fast</code>' و '<code>slow</code>' للإشارة إلى الفترات <code>200</code> و <code>600</code> ميللي ثانية، على التوالي. أمّا إذا أُدخلت أي سلسلة نصية أخرى، أو إذا حُذِف المعامل <code>duration</code>، تستخدم المدة الافتراضية <code>400</code> ميللي ثانية.

يمكننا تحريك أي عنصر، مثل صورة بسيطة:<syntaxhighlight lang="html">
<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
</syntaxhighlight>مع إظهار العنصر في البداية، يمكننا إخفاؤه ببطء:<syntaxhighlight lang="jquery">
$( "#clickme" ).click(function() {
  $( "#book" ).fadeOut( "slow", function() {
    // Animation complete.
  });
});
</syntaxhighlight>ملاحظة: لتجنب معالجة DOM غير الضرورية، لن يُخفي التابع ‎<code>.‎fadeOut()</code>‎‎ أي عنصر مُعَد مخفيًا بالفعل. للحصول على معلومات حول العناصر التي تعدَّها jQuery مخفية، راجع [[jQuery/hidden selector|المحدد ‎<code>:hidden</code>]].
===التخفيف===
اعتبارًا من الإصدار jQuery [http://api.jquery.com/category/version/1.4.3 1.4.3]، يمكن استخدام سلسلة اختيارية تسمى دالة التخفيف. تحدد دوال التخفيف السرعة التي يتقدم بها التحريك في نقاط مختلفة داخل الحركة. تُعد تطبيقات التخفيف الوحيدة في مكتبة jQuery هي التطبيقات الافتراضية، وتُدعى <code>swing</code>، والتطبيق الذي يتقدم بوتيرة ثابتة ويُدعى <code>linear</code>. وتتوفر المزيد من دوال التخفيف مع استخدام المُلحقات، وعلى الأخص [https://jqueryui.com/ طاقم jQuery UI] .
===دوال رد النداء===
تنطلق دوال رد النداء، إذا توفرت، بمجرد اكتمال الحركة. ويمكن أن يكون هذا مفيدًا لإدراج حركات مختلفة معا في تسلسل. لا يُرسل لدوال رد النداء أي وسائط، ولكن يُضبط المعامل <code>[[JavaScript/this|this]]</code> إلى عنصر DOM الذي يجري تحريكه. في حالة تحريك عناصر متعددة، من المهم ملاحظة أن دالة رد نداء تُنفذ مرة واحدة لكل عنصر مُطابق، وليس مرة واحدة للحركة ككل.

بدءًا من الإصدار jQuery [http://api.jquery.com/category/version/1.6 1.6]، يمكن استخدام التابع <code>[[JQuery/promise|‎.promise()]]</code>‎ بالتزامن مع التابع [[JQuery/deferred/done|deferred.done()‎]] لتنفيذ دالة رد نداء واحدة للحركة ككل عند اكتمال حركة جميع العناصر المطابقة (راجع أمثلة التابع ‎<code>[[JQuery/promise|‎.promise()‎]]</code>).
===ملاحظات إضافية===
يمكن إيقاف تشغيل كافة تأثيرات jQuery، بما في ذلك <code>‎.fadeOut()</code>‎، بشكل عام عن طريق ضبط <code>jQuery.fx.off = true</code>، والذي يضبط فعليًا المدة إلى 0. لمزيد من المعلومات، راجع [[JQuery/jQuery.fx.off|jQuery.fx.off]] .
===أمثلة===
تحريك جميع الفقرات لتتلاشى، واستكمال مكملاً الحركة خلال 600 مللي ثانية:<syntaxhighlight lang="html">
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fadeOut demo</title>
  <style>
  p {
    font-size: 150%;
    cursor: pointer;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>
  If you click on this paragraph
  you'll see it just fade away.
</p>
 
<script>
$( "p" ).click(function() {
  $( "p" ).fadeOut( "slow" );
});
</script>
 
</body>
</html>
</syntaxhighlight>إخفاء <code>[[HTML/span|<nowiki><span></nowiki>]]</code> في أحد الأقسام التي تنقر عليها:<syntaxhighlight lang="html">
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fadeOut demo</title>
  <style>
  span {
    cursor: pointer;
  }
  span.hilite {
    background: yellow;
  }
  div {
    display: inline;
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<h3>Find the modifiers - <div></div></h3>
<p>
  If you <span>really</span> want to go outside
  <span>in the cold</span> then make sure to wear
  your <span>warm</span> jacket given to you by
  your <span>favorite</span> teacher.
</p>
 
<script>
$( "span" ).click(function() {
  $( this ).fadeOut( 1000, function() {
    $( "div" ).text( "'" + $( this ).text() + "' has faded!" );
    $( this ).remove();
  });
});
$( "span" ).hover(function() {
  $( this ).addClass( "hilite" );
}, function() {
  $( this ).removeClass( "hilite" );
});
</script>
 
</body>
</html>
</syntaxhighlight>إخفاء اثنان من <code>[[HTML/div|<nowiki><div></nowiki>]]</code>، أحدهما مع تخفيف خطي "<code>linear</code>" والآخر مع تخفيف المتقلب الافتراضي "<code>swing</code>":<syntaxhighlight lang="html">
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fadeOut demo</title>
  <style>
  .box,
  button {
    float: left;
    margin: 5px 10px 5px 0;
  }
  .box {
    height: 80px;
    width: 80px;
    background: #090;
  }
  #log {
    clear: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button id="btn1">fade out</button>
<button id="btn2">show</button>
 
<div id="log"></div>
 
<div id="box1" class="box">linear</div>
<div id="box2" class="box">swing</div>
 
<script>
$( "#btn1" ).click(function() {
  function complete() {
    $( "<div>" ).text( this.id ).appendTo( "#log" );
  }
  $( "#box1" ).fadeOut( 1600, "linear", complete );
  $( "#box2" ).fadeOut( 1600, complete );
});
 
$( "#btn2" ).click(function() {
  $( "div" ).show();
  $( "#log" ).empty();
});
</script>
 
</body>
</html>
</syntaxhighlight>
==مصادر==
* <span> </span>[http://api.jquery.com/fadeIn/http://api.jquery.com/fadeOut/ صفحة المحدد ‎‎‎.fadeOut()‎‎‎‎‎‎‎‎ في توثيق jQuery الرسمي].
[[تصنيف:jQuery]]
[[تصنيف:jQuery Method]]
[[تصنيف:jQuery Effects]]