אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » jQuery » jQuery – אנימציות

jQuery – אנימציות

רן בר-זיק פברואר 18, 2009 9:55 am אין תגובות

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

המאמר הקודם ללימו jQueryjQuery – אפקטים
המאמר הבא ללימוד jQueryjQuery – שינויים ב-HTML חלק א'
כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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

אז בואו ניצור אנימציה באמצעות ה-div הצהוב שאנו מכירים מהמאמר הקודם. באופן עקרוני הסינטקס של פונקצית אנימציה פשוט למדי. כל מה שאני צריך לעשות זה לכתוב את הסלקטור, האירוע ואז את הפונקציה animate באופן הבא:


$("#mydiv1").animate({ 
        width: "70%",
        opacity: 0.4,
      }, 1500 );

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

אלמנט חביב

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


<script type="text/javascript"> 
$(document).ready(function() {
$("#myButton1").click(function () {
$("#mydiv1").animate({ 
        width: "70%",
        opacity: 0.4,
      }, 1500 );
});
 });
</script>

אם אתם משתמשים באנימציה לא ליניארית, אפשר להכניס אותה באופן הבא (השתמשתי כאן גם ב-swing וגם ב-linear).

אלמנט חביב

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


<script type="text/javascript"> 
$(document).ready(function() {
$("#myButton11").click(function () {
$("#mydiv11").animate({ 
        width: ["70%" , 'linear'],
        opacity: [0.4, 'swing'] 
      }, 1000);
});
 });
</script>

אפשר כמובן לשים כמה פרמטרים שרוצים וגם פרמטרים של מיקום לתזוזה. רק חשוב להדגיש משהו אחד: הפרמטרים שמכניסים צריכים להיות רלוונטיים לאלמנט. זה נשמע מטומטם קצת אבל זה לא. תחשבו למשל על אלמנט מסוים שאני רוצה להזיז אותו ועל ידי כך אני רוצה לשנות לו את הפרמטר left. אם אין לו פרמטר left ו position: relative\absolute הסקריפט לא יעבוד. מה שאני עושה באנימציות בדרך כלל זה לדאוג שהפרמטרים שאותם אני משנה יהיו ב-CSS של האלמנט מראש ואז אין לי בעיות ותסכולים מכך שהסקריפט לא עושה כלום למרות שאין שגיאות.

אלמנט חביב

הקוד נראה כך:


<script type="text/javascript"> 
$(document).ready(function() {
$("#myButton2").click(function () {
$("#mydiv2").animate({ 
        marginRight: "350px",
      }, 2500 );
});
 });
</script>

חשוב מאד להדגיש כי על כל הפרמטרים להיות ב-Camel case, כלומר אם יש קו "-" שמפריד ביניהם, כמו למשל margin-right, אנו מורידים את המקף וכותבים את האות הראשונה כאות גדולה. כך למשל font-size יהיה fontSize.

מעבר לכך אין צורך בהרבה הסברים. אפשר לשים callback כמו בשאר פונקציות ה-events.

שרשור של אנימציות

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

אלמנט חביב

איך זה נראה? כך:


<script type="text/javascript"> 
$(document).ready(function() {
    $("#myButton3").click(function(){
      $("#mydiv3").animate( { width:"90%"}, 1000 )
         .animate( { fontSize:"24px" } , 1000 )
         .animate( { borderLeftWidth:"15px" }, 1000);
    });
 });
</script>

אפשר גם לעשות delay בין האנימציות השונות באמצעות פונקצית delay שכל מה שהיא מקבלת זה את מספר המילישניות שבהן האנמציה עוצרת.

אלמנט חביב

איך זה נראה? כך:


<script type="text/javascript"> 
$(document).ready(function() {
    $("#myButton31").click(function(){
      $("#mydiv31").animate( { width:"90%"}, 1000 )
         .animate( { fontSize:"24px" } , 1000 )
	 .delay(200)
         .animate( { borderLeftWidth:"15px" }, 1000);
    });
 });
</script>

עצירת אנימציה

אפשר גם לעצור אנימציה, הכפתור מפעיל את האנימציה לחצו על ה-DIV על מנת לעצור את האנימציה.

אלמנט חביב

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


<div id="mydiv4" style="position: relative; left:-200px; width: 50px; height: 50px; background-color: Yellow;">אלמנט חביב</div> 
<p><button id="myButton4">Animate it</button></p> <script type="text/javascript"> 
$(document).ready(function() {
$("#myButton4").click(function(){
      $("#mydiv4").animate({left: '+=100px'}, 2000);
    });
    // Stop animation when button is clicked
    $("#mydiv4").click(function(){
      $("#mydiv4").stop();
    });
 });
</script>

איך זה עובד? מאד פשוט, שם האלמנט ואז פונקצית stop() וכמובן אפשר לשים את הארגומנטים clearQueue לעצירה של כל האנימציות של האלמנט (אם יש כמה אנימציות כמו שהראיתי קודם לכן) או gotoEnd שפשוט משלים את האנימציה מייד בלי אפקט ההשהיה (המילישניות). למי שלא מבין, ניתן להכניס את הארגומנטים בתוך פונקצית ה-stop ולראות מה זה עושה.

אם אתם רוצים להשבית את כל האנימציות, על סקריפט מסוים, כל מה שצריך זה לכתוב את השורה הבאה:
jQuery.fx.off = true; ואז לא יהיו אנימציות בסקריפט. לא יצא לי להשתמש בזה מעולם, אבל טוב לדעת.

toggle

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

אלמנט חביב


<script type="text/javascript"> 
$(document).ready(function() {
$("#myButton5").click(function(){
      $("#mydiv5").toggle();
    });
 });
</script>

הדוגמא הזו היא של toggle ללא פרמטרים וכאן אין אנימציה, אם האלמנט הוא display: none ה-toggle פשוט יראה אותו ואם לא אז הוא יחביא אותו. אפשר להכניס לתוך ה-toggle גם slow, fast או מספר במילישניות ואז התוצאה תהיה העלמה/תצוגה אבל באנימציה נחמדה.

אלמנט חביב


<div id="mydiv6" style="width: 100px; height: 100px; background-color: Yellow;">אלמנט חביב</div> 
<p><button id="myButton6">Toggle it</button></p> 
<script type="text/javascript"> 
$(document).ready(function() {
$("#myButton6").click(function(){
      $("#mydiv6").toggle("slow");
    });
 });
</script>

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
מידע למפתחים ספרית jQuery
ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

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

    הפרויקטים שאני כותב ושוחררו לציבור ברישיון קוד פתוח נמצאים ברובם בגיטהאב.
חיפוש

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד