אפקטים של jQuery

אחד הדברים היותר נחמדים שמציעה ספריית jQuery היא האפשרות להוספת אפקטים ויזואליים ממש בקלות. במדריך זה, נכיר שישה אפקטים עיקריים וכיצד ניתן לעשות להם toggle, ונקנח בסקריפט פשוט ושימושי, שגורם ללחיצה על כפתור ברשימה לחשוף את התוכן שמסתתר מתחתיו. בעגה מקצועית, זה מכונה אקורדיון, והוא אחד השימושים היותר פופולריים ב-jQuery.

האפקטים של jQuery

hide, show ו-toggle

האפקטים הבסיסיים ביותר הם hide/show ו-toggle. בואו נראה את האפקט. לחיצה על הכפתור תגרום להעלמות הפסקה מפני שהשתמשנו ב-()hide:

וזה הקוד שגורם לכך:

$('button').on('click' ,function(){
$(this).siblings('p').hide();
});

תוכלו להבין יותר טוב את כיצד פועל קוד ה-jQuery , אם תקראו את מדריך אירועים ב-jQuerry.
כשמשתמשים ב-()show לחיצה על הכפתור תגרום להופעת הפסקה:

וכך נראה הקוד:

$('button').on('click' ,function(){
     $(this).siblings('p').show();
});

המתודה-()toggle, חוסכות לנו בקוד, מפני שמה שהיא אומרת, אם האלמנט נראה מוצג להחביא אותו, ואם האלמנט מוסתר צריך להציג אותו. לדוגמה:

כך נראה הקוד:

$('button').on('click' ,function(){
     $(this).siblings('p').toggle();
});

fadeIn, fadeOut ו-fadeToggle

()fadeout גורמת להתפוגגות האלמנט, ()fadeIn גורמת להופעת האלמנט. ()fadeToggle גורם להתפוגגות אלמנט נראה, ולהופעת אלמנט מוסתר.

בוא נראה דוגמה ל-fadeOut :

זה הקוד:

$('button').on('click' ,function(){
     $(this).siblings('p').fadeOut();
});

slideDown, slideUp ו-slideToggle

()slideDown גורם לאלמנט להחליק, ולהופיע מתחת לאלמנט אחר, ()slideUp גורם לאלמנט להחליק ולהיעלם מתחת לאלמנט שמעליו, ו-()slideToggle גורם לאלמנט להופיע אם הוא מוחבא, ולהחבאה של האלמנט אם הוא נראה. 

דוגמה ל-()slideUp:

בהמשך המדריך נראה הדגמה נחמדה של slideUp ו-slideDown כשנבנה אקורדיון שימושי.

שליטה במהירות האפקטים

המתודות יכולות לקבל פרמטרים שונים. לדוגמה, ניתן לשלוט במהירות האפקט. כדי שמשך הזמן של ()show יהיה כ-2 שניות, נכתוב (show(2000. ערכי המספרים שאנחנו מעבירים הם במילי-שניות ולכן, חצי שנייה יבוטא ב-500 ושנייה תבוטא ב-1000.

דוגמת קוד: אקורדיון

כך זה נראה, לחיצה על כל אחד מהאלמנטים האפורים יגרום להחלקת האלמנט שמסתתר מתחת:

מבנה ההטמ"ל הוא הבא:

<div id='wrapper'>
     <div id='parent'>
     <p>jQuery</p>
     <p>ספריה פופולרית של JS</p>
     <p>סלקטורים</p>
     <p>הדרך לחבר את הספרייה עם אלמנטים בדף</p>
     <p>סלקטורים</p>
     <p>הדרך לחבר את הספרייה עם אלמנטים בדף</p>
     <p>אפקטים</p>
     <p>מדבר בעד עצמו</p>
     <p>אירועים</p>
     <p>לחיצה על מקש, שימוש בעכבר</p>
     </div>
</div>

בתוך דיב עוטף ששמו wrapper, קיים דיב נוסף parent ובתוכו הפסקאות. הפסקאות האי-זוגיות הן האלמנטים שנראים תמיד, והפסקאות הזוגיות נחשפות לפי מה שלחצנו.

עכשיו נוסיף בין תגיות <style> את ה-CSS שיגרום להסתרת כל פסקה זוגית.

p:nth-child(even){display: none;}

הסלקטור (nth-child(even: בוחר רק את האלמנטים הזוגיים, ובמקרה זה רק את הפסקאות הזוגיות.

נוסיף לפסקאות הזוגיות צבע והתנהגות בעזרת הסלקטור (nth-child(odd:

p:nth-child(odd) {background-color:#787878; color: white; margin-top: -15px; display: block; cursor: pointer;}

אתם מוזמנים לקרוא יותר על סלקטורים של CSS, במדריך סלקטורים של CSS3.

האירוע שגורם להחלקת האלמנטים הוא הקלקה על כל אחת מהפסקאות האפורות (האי-זוגיות). אפשר לכתוב את זה כך:

$('p:nth-child(odd)').on('click' , function(){
$(this).next().slideDown(300);
});

כש-this מתייחס לפסקה שעליה לחצנו, ו-next() היא מתודה שגורמת לפעולה על האלמנט שבא מיד אחרי this, ובמקרה זה, הקלקה על פסקה אי-זוגית תגרום להחלקת הפסקה שמתחתיה.

אבל יותר מומלץ להשתמש במבנה הבא:

$('#parent').on('click', 'p:nth-child(odd)', function(){
$(this).next().slideDown(300);
});

שימו לב שאנחנו לא מאזינים באמצעות המתודה on לכל אלמנט שלוחצים עליו, אלא רק לדיב ההורה שנקרא parent#, ורק אז אנחנו מעבירים לו את הילדים (p:nth-child(odd. המבנה הזה מאפשר לחסוך במשאבים, מפני שאנחנו לא מצותתים לכל הילדים, אלא רק להורה ולילד הספציפי, שעליו לחצנו.

עכשיו אנחנו רוצים להוסיף, שבפעם הראשונה שמגיעים לדף, הפסקה השנייה תיראה. בשביל זה נוסיף ל-CSS, את הסלקטור ()nth-child: , ונעביר לו את מספרו של הילד בתור פרמטר. במקרה זה, אנחנו מעוניינים לחשוף את הפסקה השנייה.

p:nth-child(2) {display: block;}

שמבטל את השפעת display:none על כל הפסקאות הזוגיות, ולכן הפסקה השנייה תראה. לקריאה נוספת על הסתרת והצגת אלמנטים בדף באמצעות CSS.

דבר נוסף, אנחנו רוצים שלחיצה על דיב מסוים תפתח רק את מה שמתחתיו, ותסגור את כל השאר. בשביל זה, נשתמש במתודה ()siblings שמתייחסת לכל האחים. במקרה זה לכל הפסקאות שעטופות בתוך הדיב parent#. כך נראה הקוד המלא:

$('#parent').on('click', 'p:nth-child(odd)', function(){
      $(this)
           .siblings('p:nth-child(even)').slideUp(300);
});

שימו לב, ש-()siblings מקבל כפרמטר את האלמנטים שעליהם הוא צריך לפעול, ובמקרה זה, הוא צריך לפעול רק על הפסקאות הזוגיות. לכן, ('(siblings('p:nth-child(even. ומה הוא עושה עם הפסקאות הזוגיות? מחליק אותם למעלה באמצעות ()slideUp.

כיצד לגרום לכך שבמקביל ל-slideDown על האלמנט הבא בתור, יעשה slideUp לכל שאר האלמנטים?

כאן בא לעזרתנו נושא השרשור (chaining), שמאפשר להפעיל על האלמנט מספר מתודות במקביל. וכך זה נראה:

$('#parent').on('click', 'p:nth-child(odd)', function(){
   $(this)
      .next().slideDown(300)
      .siblings('p:nth-child(even)').slideUp(300);
});

אפשר לראות שהמתודות שמתייחסות להצגת הפסקה הבאה בתור, וזו שמתייחסת להסתרת שאר הפסקאות משורשרות שתיהן ל-this

לסיכום, הקוד המלא לאקורדיון jQuery

<html>
<head>
<meta charset="WINDOWS-1255">
<title>jQuery tutorial effects</title>
<style>
      #wrapper{margin-right: auto; margin-left: auto; margin-top: 40px;
      width: 600px; border: 1px solid black; padding: 2px;}
      p{text-align: right; padding: 3px 10px;}
      p:nth-child(even) {background-color: #F8F8F8; display: none; margin-top: -15px;}
      p:nth-child(2) {display: block;}
      p:nth-child(odd) {background-color:#787878; color: white; margin-top: -15px; display: block; cursor: pointer;}
      p:first-child {margin-top: 0px;}
</style>
</head>
<body>
<div id='wrapper'>
      <div id='parent'>
      <p>jQuery</p>
      <p>ספריה פופולרית של JS</p>
      <p>סלקטורים</p>
      <p>הדרך לחבר את הספרייה עם אלמנטים בדף</p>
      <p>אפקטים</p>
      <p>מדבר בעד עצמו</p>
      <p>אירועים</p>
      <p>לחיצה על מקש, שימוש בעכבר</p>
</div>
</div>
     
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
(function(){
   $('#parent').on('click', 'p:nth-child(odd)', function(){
       $(this)
             .next().slideDown(300)
             .siblings('p:nth-child(even)').slideUp(300);
   });
})(jQuery);
</script>
</body>
</html>

למדריך הבא בסדרת ה-jQuery

לכל מדריכי ה-jQuery

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים