jQuery terület animate()
Terület méreteinek csökkentése, növelése.
<head>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script>
<script>
$(document).ready(function(){
// Animációkhoz, sebesség meghatározása nem kötelező. ( 3000)
$("#btn01e").click(function(){
var div = $("#dia");
div.animate({width:"150"}, 3000);
div.css("background-color", "yellow");
});
$("#btn01v").click(function(){
var div = $("#dia");
div.animate({width:"100%"}, 3000);
div.css("background-color", "green");
});
// --------------------------------------------------------------------------------------------------------
$("#btn02e").click(function(){
var div = $("#dia");
div.animate({height: "50"}, 3000);
div.css("background-color", "yellow");
});
$("#btn02v").click(function(){
var div = $("#dia");
div.animate({height: "100"}, 3000);
div.css("background-color", "green");
});
// --------------------------------------------------------------------------------------------------------
$("#btn03e").click(function(){
var div = $("#dia");
div.animate({height: "50", width:"150"}, 3000);
div.css("background-color", "yellow");
});
$("#btn03v").click(function(){
var div = $("#dia");
div.animate({height: "100", width:"100%"}, 3000);
div.css("background-color", "green");
});
// -------------------Függvény meghivással--------------------------------------------------
$("#btn04e").click(function(){
var div = $("#dia");
div.css("background-color", "yellow");
div.animate({height: "50", width:"150"}, 3000, diaVissza);
});
function diaVissza() {
var div = $("#dia");
div.animate({height: "100", width:"100%"}, 3000);
div.css("background-color", "green");
};
});
</script>
</head>
<body>
<div style="width: 100%; height: 100px;">
<div id="dia" style="width: 99%; height: 100px; margin-top: 0.1px; padding: 0.1px; background-color: green;">
<center><p> div id="dia" </p></center>
</div>
</div>
| |
|
<div id="dia"> | |
|
| |
Objektum mozgatása.
Objektum mozgatása, meghatározott területen.
</head>
<script>
$(document).ready(function(){
$("#btn06").click( function(){
var div = $("#dia02");
div.animate( {marginTop:"0px", marginLeft:"0px"}, "slow");
div.css("background-color", "green");
});
$("#btn07").click(function(){
var div = $("#dia02");
div.animate({marginTop:"0px", marginLeft:"220px"}, "slow");
div.css("background-color", "yellow");
});
$("#btn08").click(function(){
var div = $("#dia02");
div.animate({marginTop:"220px", marginLeft:"0px"}, "slow");
div.css("background-color", "yellow");
});
$("#btn09").click(function(){
var div = $("#dia02");
div.animate({marginTop:"220px", marginLeft:"220px"}, "slow");
div.css("background-color", "green");
});
});
</script>
</head>
<body>
<div style="width: 300px; height: 300px; border:2px solid black;">
<div id="dia02" style="width:80px; height: 80px; margin-top: 0.1px; padding: 0.1px; background-color: green;">
<center><p> dia02 </p></center>
</div>
</div>
<button id="btn06"> 1. Pozíció: Top-left.</button> <button id="btn07"> 2. Pozíció: Top-Right.</button><br />
<button id="btn08"> 3. Pozíció: Bottom-left.</button> <button id="btn09"> 4. Pozíció: Bottom-Right.</button>
| |
id= | |
|
| |