jQuery animáció visszahivása, ismétlése.
Link vagy szöveg, a helyén marad.
|
A programhoz, készíts egy 20x20-as sargah.jpg kiterjesztésű sárga képet, a háttérszínnek.
<head>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script>
<style>
#linkter{height:100px; width: 910px;}
#linkanimate{height:100px; width: 910px; background-image: url("sargah.jpg");}
#link{position:absolute; height:100px; width: 910px; border: 2px solid blue;}
</style>
<script>
$(document).ready(function(){
$("#link01").click(function(){
var id = $("#linkanimate");
linkAnimation();
function linkAnimation(){
id.animate({height: 100}, "slow");
id.animate({width: 300}, 3000);
id.animate({height: 100}, "slow");
id.animate({width: 100}, "slow");
id.animate({height: 100}, "slow");
id.animate({width: 910}, 3000);
id.slideUp(4000);
id.slideDown(4000);
id.fadeOut(3000);
id.fadeIn(3000);
id.fadeTo(3000, 0.2);
id.fadeTo(3000, 0.99);
id.hide("fast");
id.show("fast", linkAnimation);
}
});
// -------- Stop, új teszt. --------------
$(".of5").click( function() { window.location.reload(); } );
});
</script>
</head>
<body>
<div id="linkter">
<div id="linkanimate">
<div id="link">
<center> <h3>Link vagy szöveg, a helyén marad.</h3> </center><br />
</div>
</div>
</div>
<br /><br />
<button id="link01"> Animáció.<br />Kattints ide!</button>
<button class="of5">Animáció Stop.<br /> Új teszt!</button>
</body>
|
2. Példa. Szöveg is mozog.
|
<div id="vissza"> Példa. Animációs ismétlési teszt. </div> | |
<script>
$(document).ready(function(){
$("#btn01").click(function(){
var div = $("#vissza");
startAnimacio();
function startAnimacio(){
div.css("background-color", "blue");
div.animate({height: 300}, "slow");
div.animate({width: 300}, "slow");
div.animate({height: 100}, "slow");
div.animate({width: 100}, "slow");
div.animate({height: 300}, "slow");
div.animate({width: 910}, "slow", startAnimacio);
}
});
// ----------------------------------------------------------------
// Animáció stop, új teszt.
$(".of5").click( function() { window.location.reload(); } ) ;
});
</script>
</head>
<body>
<div style="width: 100%; height: 300px;">
<div id="vissza" style="width: 98%; height: 300px; margin-top: 0.1px; background-color: green;">
<center><p>Példa.</p> <p>Animációs ismétlési teszt.</p></center>
</div>
</div>
<button id="btn01"> Animáció start.</button>
<button class="of5">Animáció Stop.<br /> Új teszt!</button>
</body>
| |