Web.JS.Jquery.Efectos.

Published in

Enredando con la WEB.

2 min readMar 21, 2018

También se pueden dar efectos chulos a nuestras páginas. Veamos su sintaxis:

$(selector).efecto(speed,callback);

Parámetros.

speed. Velocidad en milisegundos a la hora de reproducir el efecto. También palabras prediseñadas como puede ser “slow” ó “fast”.
callback. Es una función opcional que se ejecuta cuando se reproduce el efecto.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>$(document).ready(function(){  $("#boton1").click(function(){
        $("p").toggle();
  });
    
  $("#boton3").click(function(){
    $("p").hide(1000);
  });
    
  $("#boton2").click(function(){
    $("p").show();
  });
    
});
</script>
</head>
<body>  <button id="boton1">Mostrar/Ocultar</button>
  <button id="boton2">Mostrar</button>
  <button id="boton3">Ocultar</button>  <p>Texto del párrafo.</p>
  <p>Texto del otro párrafo.</p></body>
</html>

hide() Oculta un elemento.
show() Muestra un elemento.
toggle() Hace lo mismo que las dos instrucciones anteriores.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){  $("#boton1").click(function(){
    $(".parrafo").fadeIn();
  });
    
  $("#boton3").click(function(){
    $(".parrafo").fadeOut(1000);
  });
    
  $("#boton2").click(function(){
    $(".parrafo").fadeToggle("slow");
  });
  
  $("#boton4").click(function(){
    $(".parrafo").fadeTo("slow", 0.15);
  });
  
    
});
</script>
</head>
<body>
  <button id="boton1">FadeIn</button>
  <button id="boton2">FadeToggle</button>
  <button id="boton3">FadeOut</button>
  <button id="boton4">FadeTo</button>
  <p class="parrafo">Texto del párrafo.</p>
  <p class="parrafo">Texto del otro párrafo.</p>
</body>
</html>

fadeOut() Se desvanece hasta desaparecer.
fadeIn() Vuelve aparecer hasta verse completamente.
fadeToggle() Hace lo mismo que los dos efectos anteriores.
fadeTo() Este efecto un parámetro más aparte del speed y el callback.
- Opacidad. Valores comprendidos entre el 0 y 1. El 0 es totalmente invisible y el 1 todo lo contrario. Es jugar con los decimales para darle más o menos opacidad.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>$(document).ready(function(){  $("#boton1").click(function(){
    $(".parrafo").slideDown();
  });
    
  $("#boton3").click(function(){
    $(".parrafo").slideUp(1000);
  });
    
  $("#boton2").click(function(){
    $(".parrafo").slideToggle("slow");
  });  
});</script>
</head>
<body>
  <button id="boton1">SlideDown</button>
  <button id="boton2">SlideToggle</button>
  <button id="boton3">SlideUp</button>
  <p class="parrafo">Texto del párrafo.</p>
  <p class="parrafo">Texto del otro párrafo.</p>
</body>
</html>

slideDown() Se abre con efecto persiana.
slideUp() Se cierra con efecto persiana.
slideToggle() Hace lo mismo que las dos anteriores.

También se pueden combinar varios efectos de una sola vez:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){  
  $("#boton1").click(function(){
    $(".parrafo").slideUp(1000).slideDown(1000);
  });
});
</script>
</head>
<body>
  <button id="boton1">Combina</button>
  <p class="parrafo">Texto del párrafo.</p>
  <p class="parrafo">Texto del otro párrafo.</p>
</body>
</html>

En este ejemplo hacemos el efecto persiana de recoger y soltar al hacer click en el botón de una sola vez. Se puede combinar como se quiera una, todo depende la imaginación.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){    $("#anima").click(function(){  
        $("div").animate({width: '400px', height: '400px'}, "slow");
        $("div").animate({fontSize: '100px'}, "slow");
    });
    
    $("#parar").click(function(){
        $("div").stop();
    });});
</script> 
</head>
<body>
<button id="anima">Animación</button>
<button id="parar">Parar Animación</button><br><br>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">Texto</div>
</body>
</html>

stop() Método que sirve para detener cualquier efecto en cualquier momento.
animate() Sirve para crear un efecto personalizado de varias propiedades css.

Animate no funciona con todas las propiedades css. Estas son las propiedades que podemos usar;

backgroundPositionX, backgroundPositionY, borderWidth borderBottomWidth, borderLeftWidth, borderRightWidth
borderTopWidth, borderSpacing, margin, marginBottom
marginLeft, marginRight, marginTop, outlineWidth
padding, paddingBottom, paddingLeft, paddingRight
paddingTop, height, width, maxHeight, maxWidth
minHeight, minWidth, fontSize, bottom, left right
top, letterSpacing, wordSpacing, lineHeight y textIndent.

Web.JS.Jquery.Efectos.

Written by Ismael Royano Gómez