JQuery, πώς μπορούμε να εφαρμόσουμε δυναμικά εφέ με το JQuery

Με το JQuery μπορείτε να δημιουργήσετε δυναμικά εφέ, κινούμενα σχέδια και fades ενεργώντας στα στοιχεία μιας σελίδας HTML.

Σε αυτό το άρθρο θα δούμε πώς να χρησιμοποιείτε διαφορετικές μεθόδους JQuery για τη δημιουργία κινούμενων εικόνων.

Απόκρυψη και εμφάνιση ενός στοιχείου HTML

Μέθοδοι hide() Και show()

Η μέθοδος hide() απλώς θέτει το στυλ inline display: none για επιλεγμένα είδη. Αντίθετα, η μέθοδος show() επαναφέρει τις ιδιότητες εμφάνισης. 

Ας δούμε ένα παράδειγμα:

<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).

Μπορείτε επίσης να καθορίσετε την παράμετρο διάρκειας, για να κινήσετε την εκπομπή και να αποκρύψετε εφέ για κάποιο χρονικό διάστημα.

Οι διάρκειες μπορούν να καθοριστούν χρησιμοποιώντας μία από τις προ-συμβολοσειρέςdefinite '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() ή dell ' 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>

jQuery fade εφέ

Μέθοδοι 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(), προκειμένου να ελέγχεται η διάρκεια του fade. Οι διάρκειες μπορούν να καθοριστούν χρησιμοποιώντας μία από τις προ-συμβολοσειρέςdefinite '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(), για να ελέγχετε τη διάρκεια ή την ταχύτητα του fade animation.

<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 Απαιτείται επίσης για αυτήν τη μέθοδο που καθορίζει τη διάρκεια του fade του κινούμενου σχεδίου.

<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() για να ελέγξετε τη διάρκεια της κινούμενης εικόνας της διαφάνειας. Οι διάρκειες μπορούν να καθοριστούν χρησιμοποιώντας μία από τις προ-συμβολοσειρέςdefinite '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() χρησιμοποιείται για την κίνηση αριθμητικών ιδιοτήτων CSS, όπως π.χ width, height, margin, padding, opacity, top, left και τα λοιπά. αλλά μη αριθμητικές ιδιότητες όπως color o background-color δεν μπορούν να κινηθούν χρησιμοποιώντας βασικές λειτουργίες jQuery.

Η βασική σύνταξη της μεθόδου animate() είναι το εξής:

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

Παράμετροι μεθόδου animate() έχουν τις ακόλουθες έννοιες:

• Η απαιτούμενη παράμετρος ιδιοτήτων defiολοκληρώστε τις ιδιότητες CSS για κίνηση.
• Η προαιρετική παράμετρος διάρκεια καθορίζει πόσο καιρό θα εκτελείται η κινούμενη εικόνα. Οι διάρκειες μπορούν να καθοριστούν χρησιμοποιώντας μία από τις προ-συμβολοσειρέςdefinite 'slow' o 'fast', ή σε έναν αριθμό χιλιοστών του δευτερολέπτου. Οι υψηλότερες τιμές υποδεικνύουν πιο αργά κινούμενα σχέδια.
• Η προαιρετική παράμετρος επανάκλησης είναι μια συνάρτηση που πρέπει να καλέσετε μετά την ολοκλήρωση της κινούμενης εικόνας.

Παρακάτω είναι ένα απλό παράδειγμα της μεθόδου animate() που κινεί μια εικόνα από την αρχική της θέση προς τα δεξιά κατά 300 pixel με το πάτημα του κουμπιού.

<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.

Το παρακάτω παράδειγμα δείχνει ένα κινούμενο σχέδιο 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 προαιρετική παράμετρος boolean stopAll, καθορίζει εάν θα αφαιρεθεί ή όχι η κινούμενη εικόνα στην ουρά. Η προdefinite είναι false, αυτό σημαίνει ότι μόνο η τρέχουσα κινούμενη εικόνα θα διακοπεί, τα υπόλοιπα κινούμενα σχέδια στην ουρά θα εκτελεστούν αργότερα.
• Η δυαδική παράμετρος goToEnd προαιρετικό καθορίζει εάν θα ολοκληρωθεί αμέσως η τρέχουσα κινούμενη εικόνα. Η προdefinite είναι 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 ο 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>

Τηλεφωνική

Οι δηλώσεις JavaScript εκτελούνται γραμμή προς γραμμή. Ωστόσο, δεδομένου ότι το εφέ 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