Főoldalra

jQuery animate() options


Első példa.
Szélesség csökkenése, melyhez options meghatározások is tartoznak.
duration: Beállítja az animáció időtartamát, sebességét.
easing: Lazítási funkció, elem különböző pontjain.
start: Feladat az animáció kezdetekor.
fail: Sikertelen animációnál, mi történjen.
complete: Animáció befejezése után, mi történjen.

<script>
$(document).ready(function(){
  $("#btn01").click(function(){
      $("#efekt").animate( { height: "300px", width: "300px" } , 
        {
         duration: 5000,
		 
         easing: "linear",
		 
         start: function() { $("#esemeny").after("<br />start function: Animáció kezdődik!") ;  } , 
		 
         fail: function() { $("#esemeny").after("<br />fail function: Animáció leállt!") ;  } ,
		 
         complete: function() { $("#esemeny").after("<br />complete function: Animáció befejeződött!") ;  }
        }
     );
  });
//  Animáció stop()
	$(".btnstop").click(function(){
		$("#efekt").stop( );
		$("#efekt02").stop( );
	});

// Animáció finish()
	$(".btnfinish").click(function(){
		$("#efekt").finish();
		$("#efekt02").finish();
	});
  
});
</script>
</head>
<body>
<button id="btn01"> Animáció start.</button>
<button class="btnstop"> Animáció Stop (Állj)</button>
<button class="btnfinish"> Animáció Finish (Vége)</button>

		<div id="efekt">
		<p>Példa.<br />Animációs teszt.</p>
		</div>
		
<span id="esemeny">Option események:</span>
</body>

<div id="efekt" style="width: 95%; height: 300px; background-color: green;">

Példa.


Animációs teszt.



</div>


Option események:







Második példa, Options meghatározásai:
duration: Beállítja az animáció időtartamát, sebességét.
easing: Lazítási funkció, elem különböző pontjain.
start: Feladat az animáció kezdetekor.
fail: Sikertelen animációnál, mi történjen.
always: Mi történjen, ha az animáció megáll annak elvégzése nélkül.
complete: Animáció befejezése után, mi történjen.

<script>
$(document).ready(function(){
  $("#btn02").click(function(){
      $("#efekt02").animate( { height: "300px", width: "300px" } , 
        {
         duration: 5000,
		 
         easing: "swing",
		 
         start: function() { $("#opti").after("<br />start function: Animáció kezdődik!"); },
		 
         fail: function() { $("#opti").after("<br />fail function: Animáció leállt!"); }, 
		 
         always: function() { $(this).animate( { height: "300px", width: "95%" } ) ;   $("#opti").after("<br />always function: Animáció visszaáll.!") ; } ,
		 
         complete: function() { $("#opti").after("<br />complete function: Animáció befejeződött!"); }
        }
     );
  });
//  Animáció stop()
	$(".btnstop").click(function(){
		$("#efekt").stop( );
		$("#efekt02").stop( );
	});

// Animáció finish()
	$(".btnfinish").click(function(){
		$("#efekt").finish();
		$("#efekt02").finish();
	});
  
});
</script>
</head>
<body>
<button id="btn02"> Animáció start.</button>
<button class="btnstop"> Animáció Stop (Állj)</button>
<button class="btnfinish"> Animáció Finish (Vége)</button>

		<div id="efekt02">
		<p>Példa.<br />Animációs teszt.</p>
		</div>
		
<span id="opti">Option események:</span>
</body>










<div id="efekt02" style="width: 95%; height: 300px; border: 3px solid red; background-color: yellow;">

Példa.


Animációs teszt.



</div>


Option események:





Harmadik példa, Options meghatározásai:
duration:
easing:
step: Mit kell végrehajtani, minden egyes animációs lépésnél.
always:

  $("#btnstep").click(function(){
    $("#efekt03").animate({ width: "400px"}, 
			{
			 duration: 5000,
			 
			 easing: "linear",
			 
			 step: function(x) { $("#efekt03").text("Érték =  "+Math.round(x * 100 / 400)  + "%"); } ,
			 
			 always: function() { $(this).animate( { height: "300px", width: "95%" }); }
			}
		);
  });

<div id="efekt03" style="width: 95%; height: 300px; border: 3px solid red; background-color: yellow;">

Példa.


Animáció option Step



</div>








step és progress aktiválódás számlálása.

step: Aktiválódik, minden egyes animációs lépésnél.
progress: Aktiválódik, minden egyes animációs lépés után.

.animacio02{width: 300px; height: 300px; border:2px solid black;}
#dia02{width:80px; height: 80px; margin-top: 0.01px; padding: 0.01px; background-color: green;}


dia02








<script>
$(document).ready(function(){
// --------- step és progress -------------------------------------------------------	  
 var lepesek=0; var lepes=0;				
$("#btnlepes01").click( function(){ 
    var div = $("#dia02");  
		div.animate( {marginTop:"0px", marginLeft:"0px"}, 
			{
			 duration: 5000,
			 easing: "swing",
			 step: function() {lepesek++;},
			 progress: function() {lepes++;},
			 done: function() {  $("#spa").html("step = " +lepesek + " progress =" +lepes);},
			 complete: function() {  $("#sp").html("step = " +lepesek + " progress =" +lepes); lepesek=0; lepes=0;}
			});
			div.css("background-color", "green");
	});

$("#btnlepes02").click(function(){
	var div = $("#dia02");
		div.animate({marginTop:"0px", marginLeft:"220px"}, 
			{
			 duration: 5000,
			 easing: "swing",
			 step: function() {lepesek++;},
			 progress: function() {lepes++;},
			 done: function() {  $("#spa").html("step = " +lepesek + " progress =" +lepes+"");},
			 complete: function() {  $("#sp").html("step = " +lepesek + " progress =" +lepes+""); lepesek=0; lepes=0;}
			});
		div.css("background-color", "yellow");
});

$("#btnlepes03").click(function(){
	var div = $("#dia02");
		div.animate({marginTop:"220px", marginLeft:"0px"}, 
			{
			 duration: 5000,
			 easing: "swing",
			 step: function() {lepesek++;},
			 progress: function() {lepes++;},
			 done: function() {  $("#spa").html("step = " +lepesek + " progress =" +lepes+"");},
			 complete: function() {  $("#sp").html("step = " +lepesek + " progress =" +lepes+""); lepesek=0; lepes=0;}
			});
		div.css("background-color", "yellow");
});

$("#btnlepes04").click(function(){
	var div = $("#dia02");
		div.animate({marginTop:"220px", marginLeft:"220px"}, 
			{
			 duration: 5000,
			 easing: "swing",
			 step: function() {lepesek++;},
			 progress: function() {lepes++;},
			 done: function() {  $("#spa").html("step = " +lepesek + " progress =" +lepes);},
			 complete: function() {  $("#sp").html("step = " +lepesek + " progress =" +lepes); lepesek=0; lepes=0;}
			});
		div.css("background-color", "green");
}); 
});
</script>
</head>
<body>
<span id="sp">>/span>
    <div class="animacio02"> 
            <div id="dia02">
                   <center><p>dia02</p></center>
            </div>
    </div>
<span id="spa"></span>

<button id="btnlepes01">1. Pozícióba lépések száma:<br /> Top-left.</button> 
<button id="btnlepes02">2. Pozícióba lépések száma:<br /> Top-Right.</button><br />
<button id="btnlepes03">3. Pozícióba lépések száma:<br /> Bottom-left.</button> 
<button id="btnlepes04">4. Pozícióba lépések száma:<br /> Bottom-Right.</button>

</body>

animate specialEasing

Kattints lent, a Start
specialEasing gombra. 




<head>    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
<style> 
            #specanimacio { position: absolute; margin-top: 20px; margin-left: 30px; width: 200px; padding: 8px;
                              text-align: center; color: white; font-weight: bold;  background-color: green; }
</style>
<script>
$(document).ready(function(){
	$('#animacio01').click(function() {
		$('#specanimacio').animate( 
			{marginTop: '400px',marginLeft: '400px' },
			{ duration: 3000, specialEasing: {marginTop: 'swing', marginLeft: 'linear'}  }
		);
	});
 // -------------------------------------------------------------------------------------------------------------------------- 	
	$('#animacio02').click(function() {
		$('#specanimacio').animate(
			{ marginTop: '20px', marginLeft: '30px' },
			{ duration: 3000, specialEasing: { marginTop: 'linear', marginLeft: 'swing'}  }
		);
	});
});
</script>
</head>
<body>
<div id="specanimacio"> Kattints lent, a Start <br /> specialEasing gombra. </div>
<br /><br /><br /><br />
    <button id="animacio01">Start.<br /> specialEasing Animate</button>
	<button id="animacio02">Vissza.<br />specialEasing Animate</button>
</body>



Relatív vagy absolute animációkhoz
" += " vagy " -= " jelek alkalmazása.

<head>    
   <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
<style> 
        .blokk{position: relativ; background-color: orange; width: 100px; height: 100px;}
</style>
<script>
$(document).ready(function(){
	$( "#animate_right" ).click(function() {
		$( ".blokk" ).animate({ "marginLeft": "+=100px" }, "slow" );
	});
 // -----------------------------------------------------------------------------------------
	$( "#animate_left" ).click(function(){
		$( ".blokk" ).animate({ "marginLeft": "-=100px" }, "slow" );
	});
});
</script>
</head>
<body>
          <button id="animate_left"> &lt; Balra </button>
          <button id="animate_right"> Jobbra &gt; </button>
  <div style="margin-left: 250px; width: 100px; height: 100px; border: 2px solid red;">
     <div class="blokk">Blokk.</div>
  </div>
  
</body>



Blokk.