تبسيط البرمجة ب JavaScript باستخدام jQuery


الدرس: الرسوم المتحركة والتأثيرات


الصفحة السابقة
في هذا الفصل ، سأريك كيفية تحريك صفحات الويب الخاصة بك. بعد هذه القراءة ، ستعرف كيفية جعلها تظهر وتختفي وتحريك الكائنات ، عن طريق استخدام والجمع بين الأساليب المحددة مسبقًا في jQuery .

الاظهار والاخفاء


كنت قد تعرفت سابقا على الأساليب show() و hide() . في الإصدارات الأساسية لهاتين الطريقتين ، رأيت أن hide() الكائن أو الكائنات التي يتم تطبيقها عليها تختفي ، بينما يظهر الكائن أو الكائنات التي يتم تطبيق show() عليها .
وهكذا تخفي التعليمات $('div').hide(); كل علامات <div> في كل الوثيقة. فقط ، هذه التعليمات تظهر أو تخفي العناصر المقابلة على الفور ، دون أي رسوم متحركة ...
الاظهار / الاخفاء مع الرسوم المتحركة
إذا قضيت بعض الوقت مع أساليب show() و hide() يتم تحريك ظهور أو اخفاء من خلال العمل معا على الطول والعرض، والتعتيم أو الأشياء المعنية. يمكنك تمرير قيمة رقمية إلى هذه الطرق لتحديد وقت الحركة بالميلي ثانية ، أو تمرير السلسلة fast لتعيين مدة الحركة إلى 200 ميلي ثانية ، أو السلسلة slow لتعيينها إلى 600 ميلي ثانية.
هنا مثال على الرسوم المتحركة على أساس استخدام الأساليب show() و hide() . هنا ، يتم استخدام زري أمر لعرض وإخفاء الأسطر الزوجية للجدول.

<button id="affiche">قم باظهار الأسطر الزوجية</button>
<button id="cache">قم باخفاء الأسطر الزوجية</button><br />
<table border>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>d</td><td>e</td><td>f</td></tr>
  <tr><td>g</td><td>h</td><td>i</td></tr>
  <tr><td>j</td><td>k</td><td>l</td></tr>
  <tr><td>m</td><td>n</td><td>o</td></tr>
</table>

<script src="jquery.js"></script>
<script>
  $(function() {
    $('tr:even').css('background','yellow');
    $('td').css('width','200px');
    $('td').css('text-align','center');
    $('#affiche').click(function() {
      $('tr:even').show('slow');
    } ); 
    $('#cache').click(function() {
      $('tr:even').hide(1000);
    });
  });
</script>
جرب الكود
في نص المستند يحدد أزرار #affiche و #cache وجدول خمسة صفوف وثلاثة أعمدة. يتم تنسيق الصفيف في jQuery . أولاً ، يتم تعيين لون خلفية صفراء على الصفوف الزوجية للصفيف ، ثم يتم تعيين عرض جميع الخلايا في الصفيف إلى 200 بكسل. أخيرًا ، يتركز محتوى الخلايا.
عندما ينقر المستخدم على الزر الأول ، $('#affiche').click () يتم تنفيذ إجراء الحدث . ثم يتم عرض الأسطر الزوجية (إذا كانت مخفية) باستخدام حركة بطيئة:

$('tr:even').show('slow');
عندما ينقر المستخدم على الزر الثاني ، $('#cache').click() يتم تنفيذ إجراء الحدث . يتم بعد ذلك إخفاء الخطوط الزوجية (إذا كانت معروضة) باستخدام رسم متحرك يدوم 1000 مللي ثانية:

$('#cache').click(function() {
  $('tr:even').hide(1000);
}
إذا كانت القيم مسبقا fast و slow لغير كافية، يمكنك إعادة تعريف أو حتى إضافة غيرها. سوف تتصرف لأج ذلك على الكائن jQuery.fx.speeds . على سبيل المثال ، تعيد العبارة التالية تحديد القيمة slow وتعيينها لمدة 1500 مللي ثانية:

jQuery.fx.speeds.slow = 1500;
العبارة التالية تضيف القيمة super-slowوتخصص لها مدة 3000 مللي ثانية:

jQuery.fx.speeds['super-slow'] = 3000;
هذه القيم يمكن استخدامها في الطرق show() و hide() لكن أيضا في الطرق fadeIn() ، fadeOut() ، fadeTo() ، slideDown() ، slideUp() ، slideToggle() و animate() التي سيتم دراستها في وقت لاحق في هذا الفصل.
الرسوم المتحركة مع نموذج التقدم
عن طريق تحديد المدخل الثاني في الطرق show() و hide() يمكنك اختيار الرسوم المتحركة لنموذج التقدم. يتوفر قالبان في jQuery : القالب الافتراضي ( swing) وقالب التقدم الخطي ( linear) . إليك كيفية دمجها في الطرق show() و hide() :

show('slow','linear');
hide(1000,'swing');
العبارة الثانية مكافئة للبيان hide(1000); حيث swing يتم استخدام القالب افتراضيًا إذا لم يتم تحديده.
باستخدام المكونات الإضافية jQuery ، يمكنك استخدام قوالب أخرى للتقدم. لا تقلق ، سأتحدث عن ذلك لاحقًا في هذه الدورة.
المظهر / الاختفاء في الشلال
من الممكن استخدام وظيفة رد الاتصال في الأساليب show() و hide() . تسمى هذه الطريقة عند اكتمال العرض / الاختباء. على سبيل المثال ، يعرض هذا البيان مربع حوار عند اكتمال إخفاء الصور:

$('img').hide('slow', function message() {
  alert('الصور الآن قد اختفت');
});
بالرجوع إلى العنصر الأول أثناء تنفيذ الوظيفة hide() ، ومن خلال تحديد وظيفة رد الاتصال التي تشير إلى العناصر الأخرى بالطريقة next() ، يمكن إزالة العناصر المعنية من جانب المحدد واحدًا تلو الآخر. يشبه إلى حد ما لعبة الدومينو: ينهار الدومينو الأول ، ويؤدي في سقوطه الدومينو الثاني ، الذي يؤدي في سقوطه إلى الثالث ، وهكذا. هنا ، يختفي العنصر الأول (أو يظهر إذا كنت تستخدم الطريقة show()) . عند اكتمال الرسوم المتحركة ، تزيل وظيفة رد الاتصال (أو تظهر) العنصر التالي. حتى العنصر الأخير للمحدد المعني.
باستخدام هذا المبدأ ، دعونا نرى كيفية ربط مظهر / اختفاء الصور المدرجة في وثيقة.

<button id="affiche">أظهر الصور</button>
<button id="cache">قم باخفاء الصور</button><br />
<img src="bon.png">
<img src="mauvais.png">
<img src="question.png">

<script src="jquery.js"></script>
<script>
  $(function() {
    $('#affiche').click(function() {
      $('img').first().show('slow', function showNextOne() {
        $(this).next('img').show('slow', showNextOne);
      });    
    });
    $('#cache').click(function() {
      $('img').first().hide('slow', function hideNextOne() {
        $(this).next('img').hide('slow', hideNextOne);
      });    
    });
  });
</script>
جرب الكود
نص المستند يحتوي على اثنين من الأزرار بالمعرفات #affiche و #cache وثلاث صور من دون ID، فقط معروضين ببساطة واحدا تلو الآخر. عندما ينقر المستخدم على الزر الأول ، click() يتم تنفيذ طريقة الحدث المرتبطة. $('img').first() يتم عرض الصورة الأولى ( show()) . هذه الشاشة بطيئة ( slow) ، ويتم تنفيذ الوظيفة showNextOne() في نهاية الرسوم المتحركة. بدورها ، تعرض الوظيفة showNextOne() ببطء (slow)الصورة التالية ( $(this).next('img')) . تٌستدعى هذه الوظيفة عند الانتهاء من عرض الصورة بالكامل ، وتستمر الشاشة حتى آخر صورة مدرجة في الوثيقة.
عندما ينقر المستخدم على الزر الثاني ، يتم تنفيذ طريقة الحدث المرتبطة. تشبه هذه الطريقة من جميع النواحي الطريقة السابقة ، إلا أن الصور تختفي واحدًا تلو الآخر باستخدام هذه الطريقة hide() .

تلاشى العنصر


الطرق fadeIn() و fadeOut() هي أساليب تكميلية للطرق hide() و show() . كلاهما يعمل تدريجيا على عتامة عنصر. يعرض الأول العنصر والثاني يجعل العنصر يختفي.
ظهور / اختفاء
في شكلهم الأبسط الأساليب fadeIn() و fadeOut() لا تحتاج إلى مدخلات. في هذه الحالة ، يتم الظهور أو الاختفاء في 400 مللي ثانية:

$('sel').fadeIn();
$('sel').fadeOut();
بتمرير قيمة رقمية إلى هذه الطرق ، يمكنك تحديد وقت الحركة بالميلي ثانية. يمكنك أيضًا تمرير السلسلة fast لتعيين مدة الحركة إلى 200 مللي ثانية ، أو السلسلة slow لتعيينها إلى 600 مللي ثانية:

$('sel').fadeIn('fast');
$('sel').fadeOut('slow');
بإضافة المدخل الثاني في الطرق fadeIn() و fadeOut() يمكنك اختيار نموذج لتقدم الحركة. يتوفر قالبان في jQuery : القالب الافتراضي ( swing) وقالب التقدم الخطي ( linear) . إليك كيفية دمجها في الطرق fadeIn() و fadeOut() :

$('sel').fadeIn(1200,'linear');
$('sel').fadeOut(1000,'swing');
كما هو الحال مع الطرق show() و hide() ، يمكنك استخدام الإضافات jQuery لاستخدام قوالب أخرى لتقدم الحركة.
تغيير العتامة
لتعديل عتامة عنصر ما بشكل تدريجي دون الانتقال إلى اختفائه أو عتامة كاملة ، ستستخدم الطريقة fadeTo() ، والتي تكتب بالطريقة التالية :

$('sel').fadeTo(المدة, العتامة);
... حيث:
  • Sel هو محدد jQuery
  • المدة:هي مدة الحركة. إشارة إلى عدد صحيح يمثل الوقت بالمللي ثانية أو سلسلة (fast، normal أو slow) لتحديد المدة الى 200، 400 أو 600 ميلي ثانية)؛
  • العتامة:هو رقم عشري بين 0 (شفاف) و 1 (غير شفاف).
إذا لزم الأمر ، يمكنك تحديد وظيفة رد الاتصال ، والتي سيتم استدعاؤها في نهاية الحركة:

$('sel').fadeTo(المدة, العتامة, function() {
  // ......
});
على سبيل المثال ، يمكنك استخدام العبارة التالية لتغيير عتامة عنصر معرف #semiT من قيمته الحالية إلى 0.4:

$('#semiT').fadeTo(3000, 0.4);
عرض الشرائح(SLIDESHOW)
أقترح عليك أن تنفذ كل هذا لإنشاء عرض شرائح أساسي. سنقوم بوضع العديد من الصور و جعلها تختفي بفضل الطريقة fadeOut() . هنا هو الكود:

<style type="text/css">
  img { position: absolute; left: 0px; top: 0px; }
  #img1 {z-index: 1;}
  #img2 {z-index: 2;}
  #img3 {z-index: 3;}
  #img4 {z-index: 4;}
  #img5 {z-index: 5;}
</style>

<img src="pic5.jpg" id="img5">
<img src="pic4.jpg" id="img4">
<img src="pic3.jpg" id="img3">
<img src="pic2.jpg" id="img2">
<img src="pic1.jpg" id="img1">

<script src="jquery.js"></script>
<script>
  $(function() {
    $('img').first().fadeOut(2000, function suivante() {
        $(this).next('img').fadeOut(2000,suivante);
    });
  });
</script>
في نص المستند يعرض فقط خمس صور من معرفات #img1 ل #img5 . بعض تعليمات CSS تكفي للصور المتراكمة فوق بعضها البعض. لهذا ، يتم وضع الصور في نفس الموقع ، z-index ويتم تعيين صورة مختلفة لكل منها لإحداث التراص (كلما كانت الخاصية أعلى z-index ، زادت الصورة في التقدم الى الشاشة الأولى ، هنا ستكون #img5 في المقدمة أي في الشاشة الأولى.
بمجرد فتح الصفحة ، يبدأ كود jQuery في عرض slideshow . تختفي الصورة الأولى خلال ثانيتين باستخدام الطريقة fadeOut() ، ثم تستدعى الوظيفة suivante() :

$('img').first().fadeOut(2000, function suivante() {
تصل هذه الوظيفة إلى الصورة التالية ( $(this).next('img')) ، fadeOut() وتضبطها على ثانيتين ، ثم تستدعي الوظيفة suivante() :

$(this).next('img').fadeOut(2000,suivante);
أظنك فهمت , الوظيفة : suivante() يتم استدعائها حتى آخر صورة ، مما يتسبب في تلاشي جميع الصور المكدسة.
بمجرد إخفاء الصور الخمس ، لن يحدث شيء. هل من الممكن تنفيذ حلقة على الصورة الأولى لإنشاء عرض شرائح لا نهائي؟
في الواقع ، عندما يتم إخفاء جميع الصور مع الطريقة fadeOut() ، تظل النافذة فارغة بشكل محزن. أتمنى ألا تمانع كثيرًا ولكن ... سأريك كيف تنشأ عرض الشرائح بعد قليل في هذه الدورة. في الوقت الحالي ، ما زال الوقت مبكرًا وآمل أن تتمكن من تسوية عرض الشرائح هذا.

لنذهب أبعد من ذلك


توسيع / طي العناصر
في هذه المرحلة من قراءة هذا الفصل، انت تعلم كيف تظهر و تخفي العناصر باستخدام طرق show() ، fadeIn() ، hide() و fadeOut() . أقترح اكتشاف كيفية توسيع العناصر وطيّها مع تعديل طولها وعرضها في وقت واحد. لهذا ، سوف نستخدم الأساليب slideDown() ، slideUp() و slideToggle() :
  • slideDown() يزيد ارتفاع وعرض التحديد إلى البعد "الأصلي" لكل عنصر ؛
  • slideUp() يقلل ارتفاع وعرض التحديد حتى يختفي ؛
  • slideToggle() عكس الرسوم المتحركة: إذا كان حجم الكائنات المحددة صفرًا ، فسيتم زيادة طولها وعرضها حتى تصل إلى بعدها. من ناحية أخرى ، إذا كان لديهم حجم غير صفري ، فسيقل طولها وعرضها حتى تختفي.
تمامًا مثل أساليب الرسوم المتحركة الأخرى التي تمت دراستها حتى الآن ، من الممكن تمرير صفر أو مدخل واحد أو أكثر لهذه الطرق . و هذه الوثائق ستوفر كافة العناصر لفهم أفضل لكيفية استعمال هذه الأساليب لتتفاعل على أساس المعايير التي تم تمريرها لهم.
تعطيل الرسوم المتحركة
تستخدم العديد من مواقع الويب الرسوم المتحركة التي تحدثنا عنها للتو. إذا كنت تستخدمها أيضًا في صفحاتك ، فإنني أنصحك بإدراج رابط لتعطيلها.
ولكن لماذا تعطيل الرسوم المتحركة التي أخذت منا الكثير من الوقت في برمجتها ؟
سيقدر معظم الزوار الرسوم المتحركة الخاصة بك ، ولكن يجب علينا أيضًا التفكير في تلك التي قد تزعجهم! خاصة وأن هذه العملية أساسية في jQuery : لتعطيل جميع الرسوم المتحركة ، عليك فقط تعيين القيمة true إلى الكائن jQuery.fx.off :

jQuery.fx.off = true;
وإذا كنت تريد لاحقًا إعادة تنشيط الرسوم المتحركة ، فستقوم بتعيين القيمة false لنفس الكائن. يمكن تفعيل تنشيط وإلغاء تنشيط الرسوم المتحركة من خلال النقر على رابط النص التشعبي الذي تضعه في صفحاتك. الأبسط هو إنشاء فئتين:

$('.stopAnim').click(function() {
  jQuery.fx.off = true;
});
$('.execAnim').click(function() {
  jQuery.fx.off = false;
});
إنه غبي لكنه يعمل بشكل جيد للغاية!
تعيين تأخير قبل الرسوم المتحركة
في بعض الأحيان يكون من الضروري تعيين مدة زمنية قبل تشغيل الرسوم المتحركة. لذلك ، فإن أسهل طريقة هي استخدام طريقة jQuery delay() ، مع تحديد التأخير المطلوب بالمللي ثانية. على سبيل المثال ، افترض أنك تريد عرض رسالة بالطريقة fadeIn() ، وتركها معروضة لمدة ثانيتين حتى يتوفر لها وقت للقراءة ، ثم احذفها بالطريقة fadeOut() . يمكنك استخدام شيء مثل هذا:

<style>
  #message { display: none; background-color: yellow; }
</style>

<span id="message"> سيتم عرض هذا النص لمدة ثانيتين </span><br /><br />
<button id="afficheMessage"> إظهار الرسالة </button>

<script src="jquery.js"></script>
<script>
 $(function() {
   $('#afficheMessage').click(function() {
     $('#message').fadeIn('slow').delay(2000).fadeOut('slow');
   });
 });
</script>
يعرض النص الأساسي للمستند علامة <span> يوجد بها الرسالة ، وزر لتشغيل عرض الرسالة. لمنع عرض الرسالة على الصفحة الأولى، بيان CSS يعين قيمة none إلى الخاصية display للعلامة <span> . عندما يقوم المستخدم بالنقر فوق الزر ، يتم <span> بعرض النص الموجود في العلامة تدريجياً ( fadeIn('slow')) ، ويظل معروضًا لمدة ثانيتين ( delay(2000)) ، ثم يختفي تدريجياً ( fadeOut('slow')) .
تحديد الرسوم المتحركة المخصصة
تستند الطرق التي تمت مراجعتها حتى الآن إلى تأثيرات مبرمجة مسبقًا في مكتبة jQuery . في هذا القسم ، سأريك كيفية إنشاء رسوم متحركة مخصصة من خلال العمل على واحد أو أكثر من خصائص CSS عبر هذه الطريقة animate() . تحتوي هذه الطريقة على جهازي بناء جملة.
بناء الجملة الأول
بناء الجملة هذا هو الأكثر استخدامًا. لأنها تتيح تطوير العديد من الخصائص في الحركة. من الممكن اختيار مدة الحركة ، ونموذج تقدم الحركة ، وإذا لزم الأمر ، لتنفيذ وظيفة عند الانتهاء من الرسوم المتحركة:

$('sel').animate({ prop1: val1, prop2: val2, prop3: val3, etc. }, duration, model, function() {
  //................
});
... حيث:
  • sel هو محدد jQuery .
  • prop1 ، prop2 و prop3 هناك خصائص CSS val1 ، val2 و val3 القيم المرتبطة بها. سيتم تفسير قيمة رقمية على أنها عدد من البكسل. ستتطلب قيمة النوع "+ = 50" إضافة 50 بكسل تدريجيًا إلى الخاصية. على العكس ، ستحتاج القيمة "- = 50" إلى طرح 50 بكسل تدريجيًا من الخاصية. يمكنك أيضا استخدام السلاسل show ، hide و toggle على التوالي لاظهار أواخفاء وعكس الخاصيات.
  • Duration هي مدة الحركة (عدد صحيح بالمللي ثانية أو السلسلة fast ، normal أو (slow
  • Model هو الرسوم المتحركة نموذج التقدم swing) ، linear أو نموذج خاص من مكتبة اظافية).
  • function() يحتوي على عبارة واحدة أو أكثر سيتم تنفيذها عند اكتمال الرسوم المتحركة.
في هذا النحو duration، model وظائف اختيارية. إذا حددت زوجًا واحدًا أو أكثر من خصائص / قيم CSS ، فستكون الرسوم المتحركة 400 مللي ثانية.
يمكن أن تكون البيانات المحددة في الوظيفة الأولى من الطريقة animate() :
  • القيم الحرفية: "0.25" ، "50" ، "أصفر" ؛
  • القيم النسبية: "+ = 100" لزيادة بمقدار 100 بكسل أو "- = 30" لتقليل بمقدار 30 بكسل ؛
  • النسب المئوية: "15 ٪" ؛
  • نماذج النمو: swing ، linear أو نماذج أخرى يمكن الوصول باظافة مكتبات خاصة.
  • الكلمة toggle لعكس الرسوم المتحركة.
بناء الجملة الثاني
في بناء الجملة هذا ، الوسيطة الثانية للطريقة animate() هي كائن يمكن أن يحتوي على واحد أو أكثر من الخيارات المحددة بواسطة الكلمات الأساسية. يتم استخدامها في حالات خاصة ، مثل تنفيذ وظيفة في كل مرحلة من مراحل الرسوم المتحركة ، أو إدارة قوائم انتظار الرسوم المتحركة أو استخدام نماذج تقدم متعددة لتغيير خصائص CSS مختلفة:

$('sel').animate({ prop1: val1, prop2: val2, prop3: val3, etc. }, {options});
... حيث:
  • Sel هو محدد jQuery
  • prop1 ، prop2و prop3 هناك خصائص CSS val1 ، val2 و val3 القيم المرتبطة بها؛
  • options هو كائن يمكن أن يحتوي على واحد أو أكثر من الخصائص التالية:
    • Duration : مدة الحركة (عدد صحيح بالمللي ثانية أو السلسلة ( fast ، normalأو slow ) ؛
    • Easing : نموذج التقدم للرسوم المتحركة ( swing ، linear أو نموذج من البرنامج المساعد)؛
    • Complete : وظيفة تسمى عندما الانتهاء من الرسوم المتحركة ؛
    • Step : وظيفة تسمى في كل مرحلة من مراحل الرسوم المتحركة ؛
    • Queue : قيمة منطقية تشير إلى ما إذا كان يجب وضع الفيلم ( true) أم لا ( false) في قائمة انتظار للرسوم المتحركة فقط . إذا تم تعيين القيمة false لهذه الخاصية ، تبدأ الرسوم المتحركة على الفور. خلاف ذلك ، فإنه ينتظر التشغيل.
    • specialEasing : واحد أو أكثر من الأزواج خصائص CSS / نموذج التقدم.
  • عندما استعمال الطرق show() ، hide() ، fadeIn() ، fadeOut() ، fadeTo() ، slideDown() ، slideUp() و slideToggle() نستخدمها بدون مدخلات، ومدة التنفيذ هي افتراضيا تساوي 400 ميلي ثانية. إذا كنت ترغب في ذلك ، فمن الممكن اختيار مدة أخرى. يمكنك استخدام السلسلة fast لتعيين المدة إلى 200 مللي ثانية أو السلسلة slow لتعيين المدة إلى 600 مللي ثانية. ولكن يمكنك أيضًا تمرير عدد صحيح يمثل مدة بالميلي ثانية.
  • يتوفر نموذجان للتقدم للرسوم المتحركة الخاصة بك: linear و swing . إذا كنت ترغب في استخدام نماذج أخرى من التقدم ، فسوف يتعين عليك استخدام مكون إضافي أو أكثر.
  • الطرق fadeIn() ، fadeOut() و fadeTo() يسمح للعمل على التعتيم من العناصر المحددة. الأول يجعل التحديد يظهر بزيادة التعتيم حتى 1. الثاني يجعل التحديد يختفي بتقليل التعتيم حتى 0. الثالث يزيد أو يقلل التعتيم حتى يصل إلى القيمة المحدد.
  • لطي العناصر لأعلى أو لأسفل ، يمكنك استخدام الأساليب slideDown() ، slideUp() و slideToggle() . يتيح لك الحد الأدنى من المستوى باللغة الإنجليزية افتراض أن الطريقة الأولى تتكشف التحديد لأسفل والثانية تطوي التحديد لأعلى. أما بالنسبة للثالثة ، فهي تعمل slideDown() أو slideUp() كدالة في حالة الاختيار (االطّي أو التوسيع).
  • jQuery.fx.off يسمح الكائن بتنشيط وإلغاء تنشيط الرسوم المتحركة. عيّن القيمة true لتعطيل كل الرسوم المتحركة والقيمة false للسماح للرسوم المتحركة.
  • delay() تسمح لك هذه الطريقة بتأخير تنفيذ الرسوم المتحركة. يمكنك إدخاله في سلسلة الرسوم المتحركة.
  • من الممكن تحديد الرسوم المتحركة عن طريق التطوير التدريجي لواحد أو أكثر من خصائص CSS عبر هذه الطريقة animate() . وتسمى هذه الرسوم المتحركة شخصية.