JQuery, ווי קענען מיר ינסטרומענט דינאַמיש יפעקץ מיט JQuery

מיט JQuery איר קענען מאַכן דינאַמיש יפעקץ, אַנאַמיישאַנז און פיידז דורך אַקטינג אויף די עלעמענטן פון אַ HTML בלאַט.

אין דעם אַרטיקל מיר וועלן זען ווי צו נוצן פאַרשידענע JQuery מעטהאָדס פֿאַר דזשענערייטינג אַנאַמיישאַנז.

באַהאַלטן און ווייַזן אַ HTML עלעמענט

מעטהאָדס hide() און show()

די באַהאַלטן () אופֿן פשוט שטעלט דעם נוסח ינלינע display: none פֿאַר אויסגעקליבן זאכן. קאָנווערסעלי, די ווייַזן () אופֿן ריסטאָרז די אַרויסווייַזן פּראָפּערטיעס. 

לאמיר זען א ביישפיל:

<script>
$(document).ready(function(){
    // Hide displayed paragraphs
    $(".hide-btn").click(function(){
        $("p").hide();
    });
    
    // Show hidden paragraphs
    $(".show-btn").click(function(){
        $("p").show();
    });
});
</script>

אין דער ערשטער פאַל, די פּאַראַגראַף איז פאַרבאָרגן ווען איר דריקט אויף די קנעפּל (hide-btn), אין די רגע פאַל די פּאַראַגראַף איז געוויזן ווען איר דריקט אויף די קנעפּל (show-btn).

איר קענען אויך ספּעציפיצירן די געדויער פּאַראַמעטער, צו ופלעבן די ווייַזן און באַהאַלטן ווירקונג פֿאַר אַ צייט.

געדויער קענען זיין ספּעסיפיעד מיט איינער פון די פּרי סטרינגסdefiנייט 'slow' o 'fast', אָדער אין אַ נומער פון מיליסעקאַנדז, פֿאַר גרעסערע פּינטלעכקייַט; העכער וואַלועס אָנווייַזן סלאָוער אַנאַמיישאַנז.

<script>
$(document).ready(function(){
    // Hide displayed paragraphs with different speeds
    $(".hide-btn").click(function(){
        $("p.normal").hide();
        $("p.fast").hide("fast");
        $("p.slow").hide("slow");
        $("p.very-fast").hide(50);
        $("p.very-slow").hide(2000);
    });
    
    // Show hidden paragraphs with different speeds
    $(".show-btn").click(function(){
        $("p.normal").show();
        $("p.fast").show("fast");
        $("p.slow").show("slow");
        $("p.very-fast").show(50);
        $("p.very-slow").show(2000);
    });
});
</script>

די שטריקל פאַרdefinita 'fast' ינדיקייץ אַ געדויער פון 200 מיליסעקאַנדז, בשעת די שטריקל 'slow' ינדיקייץ די געדויער פון 600 מיליסעקאַנדז.

מיר קענען ספּעציפיצירן אַ פֿונקציע פון callback צו זיין עקסאַקיוטאַד נאָך דעם אופֿן קאַמפּלישאַן show() אָדער hide()

<script>
$(document).ready(function(){
    // Display alert message after hiding paragraphs
    $(".hide-btn").click(function(){
        $("p").hide("slow", function(){
            // Code to be executed
            alert("The hide effect is completed.");
        });
    });
    
    // Display alert message after showing paragraphs
    $(".show-btn").click(function(){
        $("p").show("slow", function(){
            // Code to be executed
            alert("The show effect is completed.");
        });
    });
});
</script>

דער שיטה פון רעדאקציע

די jQuery אופֿן toggle() ווייַזן אָדער באַהאַלטן זאכן אין אַזאַ אַ וועג אַז אויב די נומער איז ערשט געוויזן, עס וועט זיין פאַרבאָרגן; קאָנווערסעלי אויב פאַרבאָרגן, עס וועט זיין געוויזן (פּראַקטאַקלי טאַגאַלז זייַן וויזאַביליטי).

<script>
$(document).ready(function(){
    // Toggles paragraphs display
    $(".toggle-btn").click(function(){
        $("p").toggle();
    });
});
</script>

סימילאַרלי, איר קענען ספּעציפיצירן די פּאַראַמעטער duration פֿאַר דעם אופֿן toggle(), אין אַזאַ אַ וועג ווי צו אַנאַלייז די יבערגאַנג צווישן קענטיק און פאַרבאָרגן, ווי מעטהאָדס show() e hide()

<script>
$(document).ready(function(){
    // Toggles paragraphs with different speeds
    $(".toggle-btn").click(function(){
        $("p.normal").toggle();
        $("p.fast").toggle("fast");
        $("p.slow").toggle("slow");
        $("p.very-fast").toggle(50);
        $("p.very-slow").toggle(2000);
    });
});
</script>

סימילאַרלי, איר קענען אויך ספּעציפיצירן אַ פֿונקציע פון callback פֿאַר דעם אופֿן toggle().

<script>
$(document).ready(function(){
    // Display alert message after toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").toggle(1000, function(){
            // Code to be executed
            alert("The toggle effect is completed.");
        });
    });
});
</script>

דזשקווערי וועלקן יפעקץ

מעטהאָדס fadeIn() e fadeOut()

איר קענען נוצן jQuery מעטהאָדס fadeIn()e fadeOut() צו ווייַזן אָדער באַהאַלטן HTML עלעמענטן, ביסלעכווייַז ינקריסינג אָדער דיקריסינג זייער אָופּאַסאַטי און קריייטינג אַ פאַדינג ווירקונג.

<script>
$(document).ready(function(){
    // Fading out displayed paragraphs
    $(".out-btn").click(function(){
        $("p").fadeOut();
    });
    
    // Fading in hidden paragraphs
    $(".in-btn").click(function(){
        $("p").fadeIn();
    });
});
</script>

ווי אנדערע jQuery יפעקץ מעטהאָדס, איר קענען אָפּטיאָנאַללי ספּעציפיצירן געדויער אָדער גיכקייַט פּאַראַמעטער פֿאַר מעטהאָדס fadeIn()e fadeOut(), אין סדר צו קאָנטראָלירן די געדויער פון די וועלקן. געדויער קענען זיין ספּעסיפיעד מיט איינער פון די פּרי סטרינגסdefiנייט 'slow' o 'fast', אָדער אין אַ נומער פון מיליסעקאַנדז; העכער וואַלועס אָנווייַזן סלאָוער אַנאַמיישאַנז.

<script>
$(document).ready(function(){
    // Fading out displayed paragraphs with different speeds
    $(".out-btn").click(function(){
        $("p.normal").fadeOut();
        $("p.fast").fadeOut("fast");
        $("p.slow").fadeOut("slow");
        $("p.very-fast").fadeOut(50);
        $("p.very-slow").fadeOut(2000);
    });
    
    // Fading in hidden paragraphs with different speeds
    $(".in-btn").click(function(){
        $("p.normal").fadeIn();
        $("p.fast").fadeIn("fast");
        $("p.slow").fadeIn("slow");
        $("p.very-fast").fadeIn(50);
        $("p.very-slow").fadeIn(2000);
    });
});
</script>

די ווירקונג פון די מעטהאָדס fadeIn() / fadeOut() עס איז ענלעך צו show() / hide(), אָבער ניט ענלעך די מעטהאָדס show() / hide(), די ערשטע ופלעבן בלויז די אָופּאַסאַטי פון די ציל עלעמענטן און טאָן ניט ופלעבן זייער גרייס.

אויך איר קענען ספּעציפיצירן אַ פֿונקציע פון callback צו לויפן נאָך די מעטהאָדס פאַרענדיקן fadeIn() / fadeOut().

<script>
$(document).ready(function(){
    // Display alert message after fading out paragraphs
    $(".out-btn").click(function(){
        $("p").fadeOut("slow", function(){
            // Code to be executed
            alert("The fade-out effect is completed.");
        });
    });
    
    // Display alert message after fading in paragraphs
    $(".in-btn").click(function(){
        $("p").fadeIn("slow", function(){
            // Code to be executed
            alert("The fade-in effect is completed.");
        });
    });
});
</script>

מעטאָד fadeToggle()

די jQuery אופֿן fadeToggle() דיספּלייז אָדער כיידז אויסגעקליבן עלעמענטן דורך אַנאַמייטינג זייער אָופּאַסאַטי אַזוי אַז אויב דער עלעמענט איז טכילעס געוויזן, עס וועט זיין פיידאַד; אויב עס איז געווען פאַרבאָרגן, עס וועט וועלקן אויס (ד"ה טאַגאַל די וועלקן ווירקונג).

<script>
$(document).ready(function(){
    // Toggles paragraphs display with fading
    $(".toggle-btn").click(function(){
        $("p").fadeToggle();
    });
});
</script>

איר קענען אויך ספּעציפיצירן די לעבן פּאַראַמעטער פֿאַר דעם אופֿן fadeToggle() ווי פֿאַר די מעטהאָדס fadeIn() / fadeOut(), צו קאָנטראָלירן די געדויער אָדער גיכקייַט פון די וועלקן אַנאַמיישאַן.

<script>
$(document).ready(function(){
    // Fade Toggles paragraphs with different speeds
    $(".toggle-btn").click(function(){
        $("p.normal").fadeToggle();
        $("p.fast").fadeToggle("fast");
        $("p.slow").fadeToggle("slow");
        $("p.very-fast").fadeToggle(50);
        $("p.very-slow").fadeToggle(2000);
    });
});
</script>

דער FadeToggle () אופֿן אויך האט די פיייקייט צו ספּעציפיצירן אַ פֿונקציע callback.

<script>
$(document).ready(function(){
    // Display alert message after fade toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").fadeToggle(1000, function(){
            // Code to be executed
            alert("The fade-toggle effect is completed.");
        });
    });
});
</script>

מעטאָד fadeTo()

די jQuery אופֿן fadeTo() עס איז ענלעך צו דער אופֿן fadeIn(), אָבער ניט ענלעך דעם אופֿן fadeIn(), דער שיטה fadeTo() לעץ איר צונויפגיסן עלעמענטן צו אַ זיכער מדרגה פון אָופּאַסאַטי.

$(selector).fadeTo(speed, opacity, callback);

די פארלאנגט פּאַראַמעטער opacity ספּעציפיצירט די לעצט אָופּאַסאַטי פון די ציל עלעמענטן וואָס קענען זיין אַ נומער צווישן 0 און 1. דער פּאַראַמעטער duration o speed עס איז אויך פארלאנגט פֿאַר דעם אופֿן וואָס ספּעציפיצירט די געדויער פון וועלקן אַנאַמיישאַן.

<script>
$(document).ready(function(){
    // Fade to paragraphs with different opacity
    $(".to-btn").click(function(){
        $("p.none").fadeTo("fast", 0);
        $("p.partial").fadeTo("slow", 0.5);
        $("p.complete").fadeTo(2000, 1);
    });
});
</script>

מעגילע יפעקץ

מעטהאָדס slideUp() e slideDown()

די jQuery אופֿן slideUp() e slideDown() זענען געניצט צו באַהאַלטן אָדער ווייַזן HTML עלעמענטן דורך ביסלעכווייַז דיקריסינג אָדער ינקריסינג זייער הייך (ד"ה סקראָללינג זיי אַרויף אָדער אַראָפּ).

<script>
$(document).ready(function(){
    // Slide up displayed paragraphs
    $(".up-btn").click(function(){
        $("p").slideUp();
    });
    
    // Slide down hidden paragraphs
    $(".down-btn").click(function(){
        $("p").slideDown();
    });
});
</script>

ווי אנדערע jQuery יפעקץ מעטהאָדס, איר קענען אָפּטיאָנאַללי ספּעציפיצירן געדויער אָדער גיכקייַט פּאַראַמעטער פֿאַר די מעטהאָדס slideUp() e slideDown() צו קאָנטראָלירן די געדויער פון די רוק אַנאַמיישאַן. געדויער קענען זיין ספּעסיפיעד מיט איינער פון די פּרי סטרינגסdefiנייט 'slow' o 'fast', אָדער אין אַ נומער פון מיליסעקאַנדז; העכער וואַלועס אָנווייַזן סלאָוער אַנאַמיישאַנז.

<script>
$(document).ready(function(){
    // Sliding up displayed paragraphs with different speeds
    $(".up-btn").click(function(){
        $("p.normal").slideUp();
        $("p.fast").slideUp("fast");
        $("p.slow").slideUp("slow");
        $("p.very-fast").slideUp(50);
        $("p.very-slow").slideUp(2000);
    });
    
    // Sliding down hidden paragraphs with different speeds
    $(".down-btn").click(function(){
        $("p.normal").slideDown();
        $("p.fast").slideDown("fast");
        $("p.slow").slideDown("slow");
        $("p.very-fast").slideDown(50);
        $("p.very-slow").slideDown(2000);
    });
});
</script>

איר קענען אויך ספּעציפיצירן אַ קאַללבאַקק פֿונקציע צו ויספירן נאָך דעם אופֿן קאַמפּלישאַן slideUp() o slideDown().

<script>
$(document).ready(function(){
    // Display alert message after sliding up paragraphs
    $(".up-btn").click(function(){
        $("p").slideUp("slow", function(){
            // Code to be executed
            alert("The slide-up effect is completed.");
        });
    });
    
    // Display alert message after sliding down paragraphs
    $(".down-btn").click(function(){
        $("p").slideDown("slow", function(){
            // Code to be executed
            alert("The slide-down effect is completed.");
        });
    });
});
</script>

מעטאָד slideToggle()

די jQuery אופֿן slideToggle() ווייַזן אָדער באַהאַלטן אויסגעקליבן עלעמענטן דורך אַנאַמייטינג זייער הייך אַזוי אַז אויב דער עלעמענט איז טכילעס געוויזן, עס וועט זיין סקראָללעד אַרויף; אויב פאַרבאָרגן, עס וועט זיין סקראָללינג אַראָפּ, ד"ה טאַגאַלז צווישן מעטהאָדס slideUp() e slideDown().

<script>
$(document).ready(function(){
    // Toggles paragraphs display with sliding
    $(".toggle-btn").click(function(){
        $("p").slideToggle();
    });
});
</script>

סימילאַרלי, איר קענען ספּעציפיצירן די לעבן פּאַראַמעטער פֿאַר דעם אופֿן slideToggle() קומען slideUp() e slideDown().

<script>
$(document).ready(function(){
    // Slide Toggles paragraphs with different speeds
    $(".toggle-btn").click(function(){
        $("p.normal").slideToggle();
        $("p.fast").slideToggle("fast");
        $("p.slow").slideToggle("slow");
        $("p.very-fast").slideToggle(50);
        $("p.very-slow").slideToggle(2000);
    });
});
</script>

סימילאַרלי, איר קענען אויך ספּעציפיצירן אַ קאַללבאַק פונקציע פֿאַר דעם אופֿן slideToggle().

<script>
$(document).ready(function(){
    // Display alert message after slide toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").slideToggle(1000, function(){
            // Code to be executed
            alert("The slide-toggle effect is completed.");
        });
    });
});
</script>

אַנאַמיישאַן יפעקץ

מעטאָד animate()

די jQuery אופֿן animate() עס איז געניצט צו שאַפֿן מנהג אַנאַמיישאַנז. דער שיטה animate() איז געניצט צו ופלעבן נומעריק קסס פּראָפּערטיעס, אַזאַ ווי width, height, margin, padding, opacity, top, left אאז"ו ו אָבער ניט-נומעריקאַל פּראָפּערטיעס ווי color o background-color זיי קענען ניט זיין אַנימאַטעד ניצן יקערדיק דזשקווערי פאַנגקשאַנאַליטי.

די גרונט סינטאַקס פון דעם אופֿן animate() עס איז די פאלגענדע:

$(selector).animate({ properties }, duration, callback);

אופֿן פּאַראַמעטערס animate() האָבן די פאלגענדע מינינגז:

• די פארלאנגט פּראָפּערטיעס פּאַראַמעטער defiענדיקן די CSS פּראָפּערטיעס צו ופלעבן.
• די אַפּשאַנאַל געדויער פּאַראַמעטער ספּעציפיצירט ווי לאַנג די אַנאַמיישאַן וועט לויפן. געדויער קענען זיין ספּעסיפיעד מיט איינער פון די פּרי סטרינגסdefiנייט 'slow' o 'fast', אָדער אין אַ נומער פון מיליסעקאַנדז; העכער וואַלועס אָנווייַזן סלאָוער אַנאַמיישאַנז.
• די אַפּשאַנאַל קאַללבאַקק פּאַראַמעטער איז אַ פֿונקציע צו רופן נאָך די אַנאַמיישאַן איז גאַנץ.

ונטער איז אַ פּשוט בייַשפּיל פון דעם אופֿן animate() וואָס אַנאַמייץ אַ בילד פֿון זיין אָריגינעל שטעלע צו די רעכט מיט 300 בילדצעלן אויף די קליקינג קנעפּל.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("img").animate({
            left: 300
        });
    });
});
</script>

איר קענען אויך ופלעבן קייפל פּראָפּערטיעס פון אַן עלעמענט צוזאַמען מיט דעם אופֿן animate(). אַלע פאַרמאָג זענען אַנימאַטעד אין דער זעלביקער צייט אָן קיין פאַרהאַלטן.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: "300px",
            height: "300px",
            marginLeft: "150px",
            borderWidth: "10px",
            opacity: 0.5
        });
    });
});
</script>

איר קענען אויך ופלעבן קייפל פּראָפּערטיעס פון אַן עלעמענט איינער דורך איינער ינדיווידזשואַלי אין אַ ריי ניצן jQuery ס קאַנקאַטאַניישאַן פונקציע.

די פאלגענדע ביישפּיל ווייזט אַ קיי אָדער טשיינד דזשקווערי אַנאַמיישאַן, ווו יעדער אַנאַמיישאַן וועט אָנהייבן אַמאָל די פריערדיקע אַנאַמיישאַן אויף דעם עלעמענט איז געענדיקט. מיר וועלן זען די קאַנקאַטאַניישאַן פונקציע אין אַ צוקונפֿט אַרטיקל.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box")
            .animate({width: "300px"})
            .animate({height: "300px"})
            .animate({marginLeft: "150px"})
            .animate({borderWidth: "10px"})
            .animate({opacity: 0.5});
    });
});
</script>

עס איז אויך מעגלעך defiניש קאָרעוו וואַלועס פֿאַר אַנימאַטעד פּראָפּערטיעס. אויב אַ ווערט איז ספּעסיפיעד מיט אַ פּרעפיקס += o -=, דער ציל ווערט איז קאַלקיאַלייטיד דורך אַדינג אָדער סאַבטראַקטינג די ספּעסיפיעד נומער פון די קראַנט ווערט פון די פאַרמאָג.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({            
            top: "+=50px",
            left: "+=50px",
            width: "+=50px",
            height: "+=50px"
        });
    });
});
</script>

אין אַדישאַן צו נומעריק וואַלועס, יעדער פאַרמאָג קענען אָננעמען סטרינגס 'show', 'hide' e 'toggle'. עס וועט זיין זייער נוציק אין אַ סיטואַציע ווען איר נאָר ווילן צו ופלעבן די פאַרמאָג פון זיין קראַנט ווערט צו זיין ערשט ווערט און וויצע ווערסאַ.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: 'toggle'
        });
    });
});
</script>

מעטאָד stop()

די jQuery אופֿן stop() איז געניצט צו האַלטן איצט פליסנדיק jQuery אַנאַמיישאַנז אָדער יפעקץ אויף אויסגעקליבן עלעמענטן איידער קאַמפּלישאַן.

די גרונט סינטאַקס פון דעם אופֿן stop() jQuery קענען זיין געגעבן מיט:

$(selector).stop(stopAll, goToEnd);

די פּאַראַמעטערס אין די אויבן סינטאַקס האָבן די פאלגענדע מינינגז:

• Il אַפּשאַנאַל פּאַראַמעטער בוליאַן סטאָפּאַלל, ספּעציפיצירט צי ניט צו באַזייַטיקן די קיו אַנאַמיישאַן. די פריערdefiניט איז false, דאָס מיינט אַז בלויז די קראַנט אַנאַמיישאַן וועט זיין סטאַפּט, די רעשט פון די אַנאַמיישאַנז אין דער ריי וועט זיין עקסאַקיוטאַד שפּעטער.
• די בולאַן פּאַראַמעטער goToEnd אַפּשאַנאַל ספּעציפיצירן צי צו פאַרענדיקן די קראַנט אַנאַמיישאַן מיד. די פריערdefiניט איז false.

דאָ איז אַ פּשוט בייַשפּיל דעמאַנסטרייטינג דעם אופֿן stop() אין פאַקטיש קאַמף ווו איר קענען אָנהייבן און האַלטן די אַנאַמיישאַן אויף די קנעפּל גיט.

<script>
$(document).ready(function(){
    // Start animation
    $(".start-btn").click(function(){
      $("img").animate({left: "+=150px"}, 2000);
    });
 
    // Stop running animation
    $(".stop-btn").click(function(){
      $("img").stop();
    });
    
    // Start animation in the opposite direction
    $(".back-btn").click(function(){
      $("img").animate({left: "-=150px"}, 2000);
    });
 
    // Reset to default
    $(".reset-btn").click(function(){
      $("img").animate({left: "0"}, "fast");
    });
});
</script>

דאָ איז אן אנדער בייַשפּיל פון דעם אופֿן אויב איר גיט די קנעפּל ווידערSlide Toggle"נאָך סטאַרטינג די אַנאַמיישאַן אָבער איידער עס קאַמפּליץ, די אַנאַמיישאַן וועט גלייך אָנהייבן אין די פאַרקערט ריכטונג פון די געראטעוועט סטאַרטינג פונט.

<script>
$(document).ready(function(){
    // Kill and toggle the current sliding animation
    $(".toggle-btn").on("click", function(){
        $(".box").stop().slideToggle(1000);
    });
});
</script>

ווען קריייטינג די אַנימאַטעד האָווער ווירקונג, איינער פון די מערסט פּראָסט פּראָבלעמס איר קען טרעפן איז קייפל אַנאַמיישאַנז אין די ריי ווען איר געשווינד שטעלן און באַזייַטיקן די מויז לויפֿער. פארוואס, אין דעם סיטואַציע, mouseenter gli mouseleave געשעענישן זענען פייערד געשווינד איידער די אַנאַמיישאַן קאַמפּליץ. צו ויסמיידן דעם פּראָבלעם און מאַכן אַ פייַן און גלאַט האָווער ווירקונג, איר קענען לייגן stop(true, true)צו דער מעטאָד קייט, ווי אַזוי:

<script>
$(document).ready(function(){
    $(".box").hover(function(){
        $(this).find("img").stop(true, true).fadeOut();
    }, function(){
        $(this).find("img").stop(true, true).fadeIn();
    });
});
</script>

קאַללבאַקק

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

א קאַללבאַקק פֿונקציע איז אַ פֿונקציע וואָס לויפט אַמאָל די ווירקונג איז גאַנץ. די קאַללבאַקק פֿונקציע איז דורכגעגאנגען ווי אַ אַרגומענט צו די מעטהאָדס פון די ווירקונג, און זיי יוזשאַוואַלי דערשייַנען ווי די לעצטע אופֿן אַרגומענט. פֿאַר בייַשפּיל, די יקערדיק סינטאַקס פון די jQuery ווירקונג אופֿן slideToggle() מיט אַ קאַללבאַקק פֿונקציע וואָס קענען זיין ספּעסיפיעד ווי גייט:

$(selector).slideToggle(duration, callback);

באַטראַכטן די פאלגענדע בייַשפּיל ווו מיר האָבן געשטעלט די סטייטמאַנץ slideToggle()e alert()אײנע ר בײ ם צװײטן . אויב איר פּרוּווט דעם קאָד, די פלינק וועט דערשייַנען גלייך נאָך קליקינג אויף די טאַגאַל קנעפּל אָן ווארטן פֿאַר די רוק טאַגאַל ווירקונג צו פאַרענדיקן.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow");
        alert("The slide toggle effect has completed.");
    });   
});
</script>

און דאָ איז די מאַדאַפייד ווערסיע פון ​​די פריערדיקע בייַשפּיל ווו מיר ינסערטאַד די דערקלערונג alert() ין אַ קאַללבאַק פונקציע פֿאַר דעם אופֿן slideToggle(). אויב איר פּרובירן דעם קאָד, די ווארענונג אָנזאָג וועט דערשייַנען אַמאָל די רוק טאַגאַל ווירקונג איז געענדיקט.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow", function(){
            // Code to be executed once effect is complete
            alert("The slide toggle effect has completed.");
        });
    });   
});
</script>

פּונקט אַזוי, איר קענען defiענדיקן קאַללבאַקק פאַנגקשאַנז פֿאַר די אנדערע jQuery ווירקונג מעטהאָדס, אַזאַ ווי show(), hide(), fadeIn(), fadeOut(), animate(), א.א.וו.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1, p").slideToggle("slow", function(){
            // Code to be executed once effect is complete
            alert("The slide toggle effect has completed.");
        });
    });   
});
</script>

אויב איר פּרובירן דעם מוסטער קאָד אויבן, איר וועט באַקומען די זעלבע ווארענונג אָנזאָג צוויי מאָל אַמאָל פּער נומער <h1> e <p>, נאָך געבן אַ קליק אויף די אַקטאַווייט קנעפּל.

BlogInnovazione.it