☰

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 στο δεύτερο κλικ.