jQuery slideUp() slideDown() slideToggle()
Roló (redőny) felhúzása vagy leengedése.
slideUp() Elrejti rolózással a kiválasztott elemet. $(selector).slideUp(speed,callback); slideDown() Felfedi rolózással a kiválasztott elemet. $(selector).slideDown(speed,callback); slideToggle() Váltás a slideUp () és slideDown () metódus között. $(selector).slideToggle(speed,callback);
Metódusok zárójelei között, meghatározhatunk:
sebesség paramétert: "slow"(lassu), "fast"(gyors), vagy milliseconds (idő).
slideUp(1000) vagy slideUp("fast") stb. Default value: 400 milliseconds.
callback parametert:
$("selector").slideUp( 1000, function(){ alert("A slideUp() metódus vége!"); } );
<head>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn01").click(function(){
$("#slide").slideUp();
});
// ----------------------------------------------------------------------
$("#btn02").click(function(){
$("#slide").slideDown();
});
// ----------------------------------------------------------------------
$("#btn03").click(function(){
$("#slide").slideToggle();
});
// ----------------------------------------------------------------------
$("#btn04").click(function(){
$("#slide").slideUp(4000);
});
// ----------------------------------------------------------------------
$("#btn05").click(function(){
$("#slide").slideDown(4000);
});
// ----------------------------------------------------------------------
$("#btn06").click(function(){
$("#slide").slideToggle(4000);
});
// ----------------------------------------------------------------------
// 15. Animáció finish() stop()
$("#btn15").click(function(){ $("#slide").stop(); });
$("#btn16").click(function(){ $("#slide").finish(); });
});
</script>
</head>
<body>
<div id="slide" style="width: 99%; height: 300px; margin-top: 0.1px; padding: 0.1px; background-color: green;">
<p>Példa.</p> <p>Animációs teszt.</p>
<p>Sebesség, milliseconds(4000).</p>
</div>
<button id="btn01"> Animáció előre. --></button>
<button id="btn02"> <-- Vissza animáció</button>
<button id="btn03"> Oda-Vissza.</button> <br />
<button id="btn04"> Animáció előre. --></button>>
<button id="btn05"> <-- Vissza animáció</button>
<button id="btn06"> Oda-Vissza.</button> <br />
<button id="btn15"> Animáció Stop (Állj)</button>
<button id="btn16"> Animáció Finis (Vége)</button>
</body>
|