Εφέ jQuery
jQuery μπορεί να δημιουργήσει κρυφή, εμφανής, αλληλεπίδραση, κύλιση και προσαρμοσμένα εφέ κίνησης.
Δοκιμάστε το προσωπικά
Προσπαθήστε αυτό το αποτέλεσμα του jQuery:
CodeW3C.com - Η κορυφαία ιστοσελίδα για οδηγίες Web τεχνολογίας
Στο CodeW3C.com, μπορείτε να βρείτε όλες τις απαραίτητες οδηγίες για τη δημιουργία ιστοσελίδων.
Κάντε κλικ εδώ
Παράδειγμα
- jQuery hide()
- Παρουσίαση της απλής συνάρτησης hide() του jQuery.
- jQuery hide()
- Επιπλέον δείγμα hide(). Πώς να κρύψει μέρος κειμένου.
- jQuery slideToggle()
- Παρουσίαση του απλού αποτελέσματος κύλισης panel.
- jQuery fadeTo()
- Παρουσίαση της απλής συνάρτησης fadeTo() του jQuery.
- jQuery animate()
- Παρουσίαση της απλής συνάρτησης animate() του jQuery.
jQuery κρυφή και εμφάνιση
Με τις συναρτήσεις hide() και show(), το jQuery υποστηρίζει την κρυφή και την εμφάνιση των στοιχείων HTML:
Παράδειγμα
($("#hide")).click(function(){
($("p")).hide();
});
($("#show")).click(function(){
($("p")).show();
});
Και οι hide() και οι show() μπορούν να ρυθμίσουν δύο προαιρετικές παραμέτρους: speed και callback.
Γλώσσα:
($(selector)).hide(speed,callback) ($(selector)).show(speed,callback)
speed Οι παράμετροι καθορίζουν την ταχύτητα της εμφάνισης ή της αφαίρεσης. Μπορούν να ρυθμιστούν αυτές οι τιμές: "slow", "fast", "normal" ή σε χιλιοστά δευτερόλεπτων.
callback Οι παράμετροι είναι οι ονόματα των συναρτήσεων που εκτελούνται μετά την ολοκλήρωση των συναρτήσεων hide ή show. Θα μάθετε περισσότερα για το callback Γνώσεις παραμέτρων.
Παράδειγμα
$("button").click(function(){
($("p")).hide(1000);
});
jQuery εναλλαγή
Η συνάρτηση toggle() του jQuery χρησιμοποιεί τις συναρτήσεις show() και hide() για να εναλλάσσει τη διαθεσιμότητα των στοιχείων HTML.
Κρύβει τα εμφανισμένα στοιχεία και εμφανίζει τα κρυμμένα στοιχεία.
Γλώσσα:
($(selector)).toggle(speed,callback)
speed Οι παραμέτρους μπορούν να ρυθμιστούν με αυτές τις τιμές: "slow", "fast", "normal" ή σε χιλιοστόδευτερόλεπτα.
Παράδειγμα
$("button").click(function(){
($("p")).toggle();
});
callback Η παράμετρος είναι το όνομα της συνάρτησης που εκτελείται μετά την ολοκλήρωση της συνάρτησης. Θα μάθετε περισσότερα για αυτές τις παραμέτρους στις παρακάτω ενότητες του εγχειριδίου. callback Γνώσεις παραμέτρων.
jQuery κινήσεις κύλισης - slideDown, slideUp, slideToggle
jQuery έχει τις παρακάτω κινήσεις κύλισης:
($selector).slideDown(speed,callback) ($selector).slideUp(speed,callback) $(selector).slideToggle(speed,callback)
speed Οι παραμέτρους μπορούν να ρυθμιστούν με αυτές τις τιμές: "slow", "fast", "normal" ή σε χιλιοστόδευτερόλεπτα.
callback Η παράμετρος είναι το όνομα της συνάρτησης που εκτελείται μετά την ολοκλήρωση της συνάρτησης. Θα μάθετε περισσότερα για αυτές τις παραμέτρους στις παρακάτω ενότητες του εγχειριδίου. callback Γνώσεις παραμέτρων.
Παράδειγμα slideDown()
$(".flip").click(function(){
$(".panel").slideDown();
});
Παράδειγμα slideUp()
$(".flip").click(function(){
$(".panel").slideUp()
})
Παράδειγμα slideToggle()
$(".flip").click(function(){
$(".panel").slideToggle();
});
Συναρτήσεις jQuery Fade - fadeIn(), fadeOut(), fadeTo()
Η jQuery διαθέτει τις παρακάτω fade συναρτήσεις:
$(selector).fadeIn(speed,callback) $(selector).fadeOut(speed,callback) $(selector).fadeTo(speed,opacity,callback)
speed Οι παραμέτρους μπορούν να ρυθμιστούν με αυτές τις τιμές: "slow", "fast", "normal" ή σε χιλιοστόδευτερόλεπτα.
Στην συνάρτηση fadeTo() opacity Η παράμετρος καθορίζει την αδιαφάνεια που μειώνεται στον καθορισμένο βαθμό.
callback Η παράμετρος είναι το όνομα της συνάρτησης που εκτελείται μετά την ολοκλήρωση της συνάρτησης. Θα μάθετε περισσότερα για αυτές τις παραμέτρους στις παρακάτω ενότητες του εγχειριδίου. callback Γνώσεις παραμέτρων.
Παράδειγμα fadeTo()
$("button").click(function(){
$("div").fadeTo("slow",0.25);
});
Παράδειγμα fadeOut()
$("button").click(function(){
$("div").fadeOut(4000);
});
Προσαρμοσμένη αнимατογράφηση jQuery
Η γραμματική της συνάρτησης jQuery για τη δημιουργία προσαρμοσμένων αнимατογράφων:
$(selector).animate({params},[duration],[easing],[callback])
Οι κρίσιμες παραμέτρους είναι paramsΟρίζει τις CSS ιδιότητες που δημιουργούν την αнимατογράφηση. Μπορεί να ρυθμιστούν πολλαπλές τέτοιες ιδιότητες:
$(selector).animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
Ο δεύτερος παράμετρος είναι durationΟρίζει το χρόνο που εφαρμόζεται στην αニματογράφηση. Το τιμή που ορίζει είναι: "slow", "fast", "normal" ή σε χιλιοστόδευτερόλεπτα.
Παράδειγμα 1
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>
Παράδειγμα 2
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script>
Τα στοιχεία HTML είναι εξ ορισμού στατική τοποθέτηση και δεν μπορούν να κινηθούν.
Για να μπορούν να κινήσουν τα στοιχεία, ρυθμίστε τη CSS position σε relative ή absolute.
jQuery Εφέκτη - Από αυτή τη σελίδα
| Συνάρτηση | Περιγραφή |
|---|---|
| $(selector).hide() | Απόκρυψη το επιλεγμένο στοιχείο |
| $(selector).show() | Εμφανίστε το επιλεγμένο στοιχείο |
| $(selector).toggle() | Εναλλαγή (απόκρυψη και εμφάνιση) το επιλεγμένο στοιχείο |
| $(selector).slideDown() | Αναστροφή (εμφάνιση) το επιλεγμένο στοιχείο |
| $(selector).slideUp() | Κατεβάστε το επιλεγμένο στοιχείο (απόκρυψη) |
| $(selector).slideToggle() | Εναλλαγή αναστροφής και κατεβάσματος για το επιλεγμένο στοιχείο |
| $(selector).fadeIn() | Φαίνετε το επιλεγμένο στοιχείο |
| $(selector).fadeOut() | Φαίνετε το επιλεγμένο στοιχείο |
| $(selector).fadeTo() | Φαίνετε το επιλεγμένο στοιχείο με την καθορισμένη αδιαφάνεια |
| $(selector).animate() | Εκτελέστε προσαρμοσμένες αнимάσεις για τα επιλεγμένα στοιχεία |
Για πλήρη αναγνωστική οδηγία, επισκεφθείτε το jQuery Εφέκτη Χρήμα.
