μαθήματα jquery : jQuery animation Παρουσιάζουμε τα μαθήματα jquery animation διότι το jQuery animation είναι ένας από τους ισχυρότερους λόγους για να μάθετε jquery.
jquery animation
Σε αυτό το άρθρο, συνεχίζοντας τα μαθήματα jquery , θα ασχοληθούμε με τη συνάρτηση animate() του jQuery, η οποία αποτελεί τη βάση για το jQuery animation. Η συνάρτηση animate() στο jQuery μας επιτρέπει να δημιουργούμε προσαρμοσμένα animations, και αποτελεί το σημαντικότερο σημείο στα μαθήματα jquery animation. Σύνταξη της συνάρτησης:
1
$(selector).animate({params},speed,callback);
Οι απαιτούμενες παράμετροι καθορίζουν τις ιδιότητες CSS στις οποίες θα εφαρμοστεί το jQuery animation Η προαιρετική παράμετρος speed καθορίζει τη διάρκεια του jQuery animation. Μπορεί να πάρει τις τιμές: «slow», «fast», ή milliseconds. Η προαιρετική παράμετρος callback καθορίζει τη συνάρτηση που θα εκτελεστεί αφού ολοκληρωθεί το jQuery animation.
μαθήματα jquery Στη συνέχεια ακολουθεί παράδειγμα που παρουσιάζει τη χρήση της συνάρτησης animate(). Μετακινεί ένα στοιχείο προς τα αριστερά, μέχρις ότου η ιδιότητα left (left property) να γίνει 250px:
1 2 3
$("button").click(function(){ $("div").animate({left:'250px'}); });
Και εδώ παρουσιάζουμε το παράδειγμα ενσωματωμένο μέσα στην html σελίδα:
1 <script type="text/javascript">// <![CDATA[ 2 3 $(document).ready(function(){ 4 $("button").click(function(){ $("div").animate({left:'250px'}); 5 }); 6 }); 7 // ]]></script> 8 9 <button>Start Animation</button> 10 11By default, all HTML elements have a static position, and cannot be moved. To manipulate 12relative, fixed, or absolute!</pre> style="background: #98bf21; height: 100px; width: 100px; position: absolute;"></div> 13<div <pre> 14 Στη συνέχεια παρουσιάζουμε παράδειγμα jQuery animation το οποίο κάνει animation σε πολλές ιδιότητες ταυτόχρονα (την ίδια στιγμή):
1 2 3 4 5 6 7 8
$("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); });
Και εδώ παρουσιάζουμε το παράδειγμα ενσωματωμένο μέσα στην html σελίδα:
1 <script type="text/javascript">// <![CDATA[ 2 3 $(document).ready(function(){ $("button").click(function(){ 4 $("div").animate({ 5 left:'250px', 6 opacity:'0.5', height:'150px', 7 width:'150px' 8 }); 9 }); 10}); 11// ]]></script> 12
13<button>Start Animation</button> 14 15By default, all HTML elements have a static position, and cannot be moved. To manipulate relative, fixed, or absolute!</pre> 16<div style="background: #98bf21; height: 100px; width: 100px; position: absolute;"></div> 17<pre> 18 19 Επίσης υπάρχει η δυνατότητα να ορίζουμε σχετικές τιμές (relative values). Σε αυτή την περίπτωση η τιμή ορίζεται χρησιμοποιώντας ως σημείο αναφοράς την τρέχουσα τιμή του στοιχείου. Αυτό γίνεται βάζοντας τα += ή -= πριν από την τιμή και παρουσιάζεται στο ακόλουθο παράδειγμα:
1 2 3 4 5 6 7
$("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); });
Και εδώ παρουσιάζουμε το παράδειγμα ενσωματωμένο μέσα στην html σελίδα:
1 2 <script type="text/javascript">// <![CDATA[ 3 4 $(document).ready(function(){ $("button").click(function(){ 5 $("div").animate({ 6 left:'250px', height:'+=150px', 7 width:'+=150px' 8 }); 9 }); 10}); 11// ]]></script> 12 13<button>Start Animation</button> 14 15By default, all HTML elements have a static position, and cannot be moved. To manipulate relative, fixed, or absolute!</pre> 16<div style="background: #98bf21; height: 100px; width: 100px; position: absolute;"></div> 17<pre> 18 Μπορούμε επίσης να καθορίσουμε μια παράμετρο του animation ως «show», «hide», ή «toggle», όπως φαίνεται στο ακόλουθο παράδειγμα jQuery animation:
1
$("button").click(function(){
2 3 4 5
$("div").animate({ height:'toggle' }); });
Και εδώ παρουσιάζουμε το παράδειγμα ενσωματωμένο μέσα στην html σελίδα, όπως σε όλα τα μαθήματα jquery:
1 2 <script type="text/javascript">// <![CDATA[ 3 $(document).ready(function(){ 4 $("button").click(function(){ 5 $("div").animate({ height:'toggle' 6 }); 7 }); 8 }); 9 // ]]></script> 10 11<button>Start Animation</button> 12 13By default, all HTML elements have a static position, and cannot be moved. To manipulate 14relative, fixed, or absolute!</pre> <div style="background: #98bf21; height: 100px; width: 100px; position: absolute;"></div> 15<pre> 16 Ήταν ένα άρθρο που παρουσιάζει μαθήματα jquery σχετικά με jquery animation
$(selector).animate animate() click(function() jQuery animation Start Animation μαθήματα jquery συνάρτηση animate()
Πηγή: http://www.infopolis.gr/mathimata-jquery/