Főoldalra

jQuery delay() időzítés


delay()       Kiválasztott elemeknél beállítja a késleltetést, az összes várakozó funkcióra.

A delay metódus zárójelei között határozzuk meg, a késleltetés idejét.
 "slow"(lassu),     "fast"(gyors),     vagy      milliseconds (idő). (Alapértelmezett milliseconds = 400)




<div id="dv1">

Példa 1.
Animációs terület.

</div>
<div id="dv2">

Példa 2.
Animációs terület.

</div>
<div id="dv3">

Példa 3.
Animációs terület.

</div>












 
<head>
<script>
$(document).ready(function(){

// Időzítés normál esetben. (Default milliseconds = 400)-----------------------------------------------------
  // 1. Elrejtés.
    $("#pid01").click(function(){
         $("#dv1").fadeOut();     $("#dv2").fadeOut();     $("#dv3").fadeOut();
    });

  // 2. Felfedés.
    $("#pid02").click(function(){
         $("#dv1").fadeIn();      $("#dv2").fadeIn();     $("#dv3").fadeIn();
    });
	
// Időzítés string meghatározással.---- "slow"(lassu), ----- "fast"(gyors), ----------------------------------
  // 3. Elrejtés.
    $("#pid03").click(function(){
         $("#dv1").delay("slow").fadeOut();    $("#dv2").delay().fadeOut();    $("#dv3").delay("fast").fadeOut();
    });

  // 4. Felfedés.
    $("#pid04").click(function(){
         $("#dv1").delay("fast").fadeIn();        $("#dv2").delay().fadeIn();      $("#dv3").delay("slow").fadeIn();
    });
	
// Időzítés numerikus meghatározással. ------------------------------------------------------------------------
  // 5. Elrejtés.
    $("#pid05").click(function(){
        $("#dv1").delay(1000).fadeOut();       $("#dv2").delay(3000).fadeOut();     $("#dv3").delay(2000).fadeOut();
    });
	
  // 6. Felfedés.
    $("#pid06").click(function(){
        $("#dv1").delay(1000).fadeIn();           $("#dv2").delay(3000).fadeIn();      $("#dv3").delay(2000).fadeIn();
    });
// --------------------------------------------------------------------------------------------------------------

// 7. Elrejtés / Felfedés: Időzítés numerikus meghatározással.
    $("#pid07").click(function(){
        $("#dv1").delay(1000).fadeToggle();   $("#dv2").delay(2000).fadeToggle();   $("#dv3").delay(3000).fadeToggle();
    });

});
</script>

</head>
<body>

<div style="width: 100%; height:110px; margin-bottom:5px;">
		<div id="dv1" style="width: 98%;  padding: 2px; background-color: #ffc;"> 
		<center> <p> Példa 1.<br /> Animációs terület.</p> </center> 
		</div>
</div>
<div style="width: 100%; height:110px; margin-bottom:5px;">
		<div id="dv2" style="width: 98%;  padding: 2px; background-color: #fcc;"> 
		<center> <p> Példa 2.<br /> Animációs terület.</p> </center> 
		</div>
</div>
<div style="width: 100%; height:110px; margin-bottom:5px;">
		<div id="dv3" style="width: 98%;  padding: 2px; background-color: #cfc;"> 
		<center> <p> Példa 3.<br /> Animációs terület.</p> </center> 
		</div>
</div>

<button id="pid01">1. Normál elrejtés.</button>  <br />
<button id="pid02">2. Normál felfedés.</button>  <br />
<button id="pid03">3. String. Ídőzített elrejtés.</button>  <br />
<button id="pid04">4. String. Ídőzített felfedés.</button>  <br />
<button id="pid05">5. Number. Ídőzített elrejtés.</button>  <br />
<button id="pid06">6. Number. Ídőzített felfedés.</button>  <br />
<button id="pid07">7. Ídőzített elrejtés / felfedés.</button>

</body>