Tema: Como hacer el efecto como si apagaras la tv
Ver Mensaje Individual
  #4 (permalink)  
Antiguo 09/06/2014, 18:35
K1R4MC
 
Fecha de Ingreso: abril-2014
Mensajes: 56
Antigüedad: 10 años, 6 meses
Puntos: 0
Respuesta: Como hacer el efecto como si apagaras la tv
Cita:
Iniciado por andresgarciadev Ver Mensaje
tal vez te refieres al efecto clip?
http://api.jqueryui.com/clip-effect/
sipi mira hice esto:

Código HTML: 
Ver original
  1. <html lang="es">
  2.         <head>
  3.                 <title>TeleVisor</title>
  4.                 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  5.                 <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  6.                 <script src="tvfunction.js"></script>
  7.         </head>
  8.         <style>
  9.                 #TV {
  10.                         background:#e7e7e7;
  11.                         width:500px;
  12.                         height:500px;
  13.                         margin:auto;
  14.                 }
  15.                 .TvFondoTOP {
  16.                         background:#000000;
  17.                         height:1px;
  18.                 }
  19.                 .TvFondoDown {
  20.                         background:#000000;
  21.                         height:1px;
  22.                         margin-top:499px;
  23.                 }
  24.         </style>
  25.         <section id="tv">
  26.                 <article class="TvFondoTOP"></article>
  27.                 <article class="TvFondoDown"></article>
  28.                 <button class="PrenderTV" onclick="OffTv();">Apagar</button>
  29.                 <button class="PrenderTV" onclick="OnTv();">Encender</button>
  30.         </section>
  31. <script>function OnTv()
  32.  {
  33.         // Documento Listo
  34.         $(document).ready(function(){
  35.                 // Subir Fondo TOP
  36.                 $(".TvFondoTOP").css({
  37.                         "height":"1px",
  38.                         "-webkit-transition":"1s",
  39.                 });
  40.                 // Bajar Fondo Down
  41.                 $(".tvFondoDown").css({
  42.                         "height":"1px",
  43.                         "margin-top":"499px",
  44.                         "-webkit-transition":"1s",
  45.                 });
  46.          });
  47.  }
  48. // Apagar Tv
  49.  function OffTv()
  50.  {
  51.         // Documento listo
  52.         $(document).ready(function(){
  53.                 // Bajar Fondo TOP
  54.                 $(".TvFondoTOP").css({
  55.                         "height":"49%",
  56.                         "-webkit-transition":"1s",
  57.                 });
  58.                 // Subir Fondo Down
  59.                 $(".tvFondoDown").css({
  60.                         "height":"50%",
  61.                         "margin-top":"1px",
  62.                         "-webkit-transition":"1s",
  63.                 });
  64.          });
  65.  }
  66. </script>
  67. </html>
bueno quería saber si se podía hacer con hipervinculo no soy muy bueno en lo que es javascript je ^^ digamos que va a la pagina2.php, ¿se puede?