ANIMACIÓN DE PROPIEDADES SOBRE IMAGEN
Para animar las propiedades (es decir que vayan variando en un cierto tiempo preprogramado
usamos laS funcionES de clase:
- .animate({propiedad1:'valor1',propiedad2:'valor2',...},tiempo en milisegundos). que hará variar la propiedad desde el valor actual hasta el especificado en t milisegundos.
- .slideUp(tiempo en milisegundos). que hará contraer hacia arriba el objeto hasta dejarlo 'hidden' en t milisegundos.
- .slideDown(tiempo en milisegundos). que hará lo contrario a slideUp en t milisegundos. este par es útil para acordeones
- .fadeOut(tiempo en milisegundos). que hará desaparecer el objeto hasta transparencia total (opacity=0) en t milisegundos.
- .fadeIn(tiempo en milisegundos). que hará aparecer el objeto hasta opacity=1 en t milisegundos.
<head>
<style type="text/css">
li{
font-family:Arial;
font-size:12 px;
}
</style>
<script src="../scripts/jquery-3.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#resetear").click(function(evento){
$("#imagen").animate({width:'100%',height:'100%',left:'0',top:'0'},1000);
});
$("#contraer").click(function(evento){
$("#imagen").animate({width:'25%',height:'25%'},1000);
});
$("#mover").click(function(evento){
$("#imagen").animate({left:'100',top:'100'},1000);
});
$("#vertical").click(function(evento){
if ($("#imagen").is(":hidden")) {
$("#imagen").slideDown(1000);
} else {
$("#imagen").slideUp(1000);
}
});
$("#horizontal").click(function(evento){
$("#imagen").animate({width:'0%',left:'0',top:'0'},1000);
});
$("#opacar").click(function(evento){
$("#imagen").fadeOut(1000);
});
$("#traslu").click(function(evento){
$("#imagen").fadeIn(2000);
});
});
</script>
</head>
<body>
<div class="cenefa" style="border:none;"> <!-- inicio cenefa -->
<div style="float:left; margin-left:40px;">
<img src="../imagenes/logo_cenefa.png" width="139" height="75" alt="Iqsystems-home" >
</div>
</div> <!-- fin cenefa -->
<div class="cierre"></div>
<div style="margin-left:30px; ">
<div id="capa" style="margin-bottom:30px;margin-left:30px;">
<ul>
<li id="resetear" style="cursor: pointer;">
Resetear.
</li>
<li id="contraer" style="cursor: pointer;">
Contraer izquierda (deshacer con reset).
</li>
<li id="mover" style="cursor: pointer;">
Mover derecha y abajo (deshacer con reset).
</li>
<li id="vertical" style="cursor: pointer;">
Aparecer desaparecer vertical ( flip-flop).
</li>
<li id="horizontal" style="cursor: pointer;">
Desaparecer horizontal (deshacer con reset).
</li>
<li id="opacar" style="cursor: pointer;">
Opacar (para resetear translucir).
</li>
<li id="traslu" style="cursor: pointer;">
Traslucir.
</li>
</ul>
</div>
</body>