Animation και εφέ
Για animation και εφέ μπορείτε να χρησιμοποιήσετε τη γενική εντολή
animate(properties [,duration] [,easing] [,complete])
.
$('#greece').animate( {opacity: 0.25, width: '20px'}, 3000, 'swing', function() { alert("over"); } );
Η πρώτη παράμετρος είναι ένα αντικείμενο json με μία ή περισσότερες ιδιότητες που πρόκειται να αλλάξουν στις αντίστοιχες τιμές.
Οι ιδιότητες πρέπει να δέχονται αριθμητικές τιμές όπως width, left κ.λπ.
Η δεύτερη παράμετρος ορίζει τη διάρκεια του εφέ σε χιλιοστά του δευτερολέπτου (3000).
Η τρίτη παράμετρος ορίζει το είδος του easing.
Η τέταρτη παράμετρος είναι μια ανώνυμη συνάρτηση που καλείται όταν το εφέ τελειώσει.
Από τις παραπάνω 4 παραμέτρους μόνο η πρώτη είναι υποχρεωτική.
$('#greece').animate({opacity: 0.25, width: '20px'});
Παράδειγμα με animate
Στο παρακάτω παράδειγμα με κλικ στην εικόνα καλείται η animate.
<img src="/views/images/greece-01.jpg" width = "300" id="greece" /> <script> $('#greece').click(function(){ $(this).animate({opacity: 0.25, width: '20px'}, 2000); }); </script>
Ειδικά εφέ
Για πιο ειδικά εφέ μπορείτε να χρησιμοποιήσετε τις παρακάτω συναρτήσεις.
Για hide/show
- hide()
- show()
- toggle()
Παράδειγμα με toggle
Στο παρακάτω παράδειγμα με κλικ στο κουμπί εξαφανίζεται και εμφανίζεται η εικόνα.
Η τιμή 600 που έχει περαστεί στην toggle(600) είναι προαιρετική και ορίζει τη διάρκεια του εφέ.
<img src="/views/images/greece-01.jpg" width = "300" id="greece" /> <br /> <button id="toggleButton">toggle image</button> <script> $('#toggleButton').click(function(){ $('#greece').toggle(600); }); </script>
Για fadein/fadeout
- fadeIn()
- fadeOut()
- fadeTo()
- fadeToggle()
Παράδειγμα με fadeToggle
Στο παρακάτω παράδειγμα με κλικ στο κουμπί εξαφανίζεται και εμφανίζεται η εικόνα βαθμιαία.
Η τιμή 600 που έχει περαστεί στην fadeToggle(600) είναι προαιρετική και ορίζει τη διάρκεια του εφέ.
<img src="/views/images/greece-01.jpg" width = "300" id="greece" /> <br /> <button id="fadeToggleButton">fadeToggle image</button> <script> $('#fadeToggleButton').click(function(){ $('#greece').fadeToggle(600); }); </script>
Παράδειγμα με slideToggle
<button id="toggleButton">slide toggle paragraph</button> <p id="par"> Στο παρακάτω παράδειγμα με κλικ στο κουμπί <br /> η παράγραφος κάνει slide up στο πρώτο κλικ <br /> και slide down στο δεύτερο κλικ. </p> <script> $('#toggleButton').click(function(){ $('#par').slideToggle("slow"); }); </script>
Στο παρακάτω παράδειγμα με κλικ στο κουμπί
η παράγραφος κάνει slide up στο πρώτο κλικ
και slide down στο δεύτερο κλικ.