Skip to main content
transcripción de codepen
Origen Enlace
alo Malbarez
  • 9.7k
  • 3
  • 12
  • 29

edit

$("#Pagina").mouseenter(function() {
  $("#Menuopciones").removeClass('oculto').removeClass('bounceOut').addClass('bounceIn');
});
$("#Menuopciones").hover(function() {
  $(this).css("opacity", "1");
}, function() {
  $(this).css("opacity", "");
});
$("#Pagina").mouseleave(function() {
  $("#Menuopciones").removeClass('bounceIn').addClass('bounceOut');
});
page[size="A4"] {
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  margin-top: 1.5cm;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}

@media print {
  body,
  page[size="A4"] {
    margin: 0;
    box-shadow: 0;
  }
}

#Menuopciones {
  position: absolute;
  width: 280px;
  height: 80px;
  margin: 0 0 0 -140px;
  left: 50%;
  bottom: 10%;
  background-color: rgba(0, 0, 0, 0.32);
  border-radius: 10px;
  z-index: 999;
  -webkit-animation-duration: 0.5s;
  -o-animation-duration: 0.5s;
  -moz-animation-duration: 0.5s;
  animation-duration: 0.5s;
}

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3)
  }
  50% {
    opacity: 0.4;
    -webkit-transform: scale(1.05)
  }
  70% {
    -webkit-transform: scale(.9)
  }
  100% {
    -webkit-transform: scale(1)
  }
}

@-moz-keyframes bounceIn {
  0% {
    opacity: 0;
    -moz-transform: scale(.3)
  }
  50% {
    opacity: 0.4;
    -moz-transform: scale(1.05)
  }
  70% {
    -moz-transform: scale(.9)
  }
  100% {
    -moz-transform: scale(1)
  }
}

@-o-keyframes bounceIn {
  0% {
    opacity: 0;
    -o-transform: scale(.3)
  }
  50% {
    opacity: 0.4;
    -o-transform: scale(1.05)
  }
  70% {
    -o-transform: scale(.9)
  }
  100% {
    -o-transform: scale(1)
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(.3)
  }
  50% {
    opacity: 0.4;
    transform: scale(1.05)
  }
  70% {
    transform: scale(.9)
  }
  100% {
    transform: scale(1)
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  -moz-animation-name: bounceIn;
  -o-animation-name: bounceIn;
  animation-name: bounceIn;
  opacity: 0.4
}

@-webkit-keyframes bounceOut {
  0% {
    -webkit-transform: scale(1)
  }
  25% {
    -webkit-transform: scale(.95)
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.1)
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(.3)
  }
}

@-moz-keyframes bounceOut {
  0% {
    -moz-transform: scale(1)
  }
  25% {
    -moz-transform: scale(.95)
  }
  50% {
    opacity: 1;
    -moz-transform: scale(1.1)
  }
  100% {
    opacity: 0;
    -moz-transform: scale(.3)
  }
}

@-o-keyframes bounceOut {
  0% {
    -o-transform: scale(1)
  }
  25% {
    -o-transform: scale(.95)
  }
  50% {
    opacity: 1;
    -o-transform: scale(1.1)
  }
  100% {
    opacity: 0;
    -o-transform: scale(.3)
  }
}

@keyframes bounceOut {
  0% {
    transform: scale(1)
  }
  25% {
    transform: scale(.95)
  }
  50% {
    opacity: 1;
    transform: scale(1.1)
  }
  100% {
    opacity: 0;
    transform: scale(.3)
  }
}

.bounceOut {
  -webkit-animation-name: bounceOut;
  -moz-animation-name: bounceOut;
  -o-animation-name: bounceOut;
  animation-name: bounceOut;
  opacity: 0;
}

#DGuardar {
  cursor: pointer;
  float: left;
  border: 0;
  margin: 18px 10px 0 20px;
  background: url('http://factusyn.es/Iconos.png') no-repeat;
  background-position: 0px -197px;
  background-size: 106px;
  width: 46px;
  height: 46px;
}

#DGuardar:hover {
  background-position: -57px -197px;
}

#DImprimir {
  cursor: pointer;
  float: left;
  border: 0;
  margin: 18px 10px;
  background: url('http://factusyn.es/Iconos.png') no-repeat;
  background-position: 0px -102px;
  background-size: 106px;
  width: 46px;
  height: 46px;
}

#DImprimir:hover {
  background-position: -58px -102px;
}

#DEnviar {
  cursor: pointer;
  float: left;
  border: 0;
  margin: 15px 10px;
  background: url('http://factusyn.es/Iconos.png') no-repeat;
  background-position: 0px -149px;
  background-size: 106px;
  width: 45px;
  height: 46px;
}

#DEnviar:hover {
  background-position: -57px -149px;
}

#DCancelar {
  cursor: pointer;
  float: left;
  border: 0;
  margin: 15px 10px;
  background: url('http://factusyn.es/Iconos.png') no-repeat;
  background-position: 0px -0px;
  background-size: 106px;
  width: 46px;
  height: 46px;
}

#DCancelar:hover {
  background-position: -60px -0px;
}

.oculto {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<page size="A4" id="Pagina" class="insertarDoc">
  Hola soy una pagina
</page>

<div id="Menuopciones" class="oculto">
  <div id="DGuardar" title="Guardar" onClick="CancelarNuevoGrande('')">&nbsp;</div>
  <div id="DImprimir" title="Generar pdf" onClick="printContent('');">&nbsp;</div>
  <div id="DEnviar" title="Enviar pdf">&nbsp;</div>
  <div id="DCancelar" title="Cancelar y borrar">&nbsp;</div>
</div>
</div>

edit

$("#Pagina").mouseenter(function() {
  $("#Menuopciones").removeClass('oculto').removeClass('bounceOut').addClass('bounceIn');
});
$("#Menuopciones").hover(function() {
  $(this).css("opacity", "1");
}, function() {
  $(this).css("opacity", "");
});
$("#Pagina").mouseleave(function() {
  $("#Menuopciones").removeClass('bounceIn').addClass('bounceOut');
});
page[size="A4"] {
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  margin-top: 1.5cm;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}

@media print {
  body,
  page[size="A4"] {
    margin: 0;
    box-shadow: 0;
  }
}

#Menuopciones {
  position: absolute;
  width: 280px;
  height: 80px;
  margin: 0 0 0 -140px;
  left: 50%;
  bottom: 10%;
  background-color: rgba(0, 0, 0, 0.32);
  border-radius: 10px;
  z-index: 999;
  -webkit-animation-duration: 0.5s;
  -o-animation-duration: 0.5s;
  -moz-animation-duration: 0.5s;
  animation-duration: 0.5s;
}

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3)
  }
  50% {
    opacity: 0.4;
    -webkit-transform: scale(1.05)
  }
  70% {
    -webkit-transform: scale(.9)
  }
  100% {
    -webkit-transform: scale(1)
  }
}

@-moz-keyframes bounceIn {
  0% {
    opacity: 0;
    -moz-transform: scale(.3)
  }
  50% {
    opacity: 0.4;
    -moz-transform: scale(1.05)
  }
  70% {
    -moz-transform: scale(.9)
  }
  100% {
    -moz-transform: scale(1)
  }
}

@-o-keyframes bounceIn {
  0% {
    opacity: 0;
    -o-transform: scale(.3)
  }
  50% {
    opacity: 0.4;
    -o-transform: scale(1.05)
  }
  70% {
    -o-transform: scale(.9)
  }
  100% {
    -o-transform: scale(1)
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(.3)
  }
  50% {
    opacity: 0.4;
    transform: scale(1.05)
  }
  70% {
    transform: scale(.9)
  }
  100% {
    transform: scale(1)
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  -moz-animation-name: bounceIn;
  -o-animation-name: bounceIn;
  animation-name: bounceIn;
  opacity: 0.4
}

@-webkit-keyframes bounceOut {
  0% {
    -webkit-transform: scale(1)
  }
  25% {
    -webkit-transform: scale(.95)
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.1)
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(.3)
  }
}

@-moz-keyframes bounceOut {
  0% {
    -moz-transform: scale(1)
  }
  25% {
    -moz-transform: scale(.95)
  }
  50% {
    opacity: 1;
    -moz-transform: scale(1.1)
  }
  100% {
    opacity: 0;
    -moz-transform: scale(.3)
  }
}

@-o-keyframes bounceOut {
  0% {
    -o-transform: scale(1)
  }
  25% {
    -o-transform: scale(.95)
  }
  50% {
    opacity: 1;
    -o-transform: scale(1.1)
  }
  100% {
    opacity: 0;
    -o-transform: scale(.3)
  }
}

@keyframes bounceOut {
  0% {
    transform: scale(1)
  }
  25% {
    transform: scale(.95)
  }
  50% {
    opacity: 1;
    transform: scale(1.1)
  }
  100% {
    opacity: 0;
    transform: scale(.3)
  }
}

.bounceOut {
  -webkit-animation-name: bounceOut;
  -moz-animation-name: bounceOut;
  -o-animation-name: bounceOut;
  animation-name: bounceOut;
  opacity: 0;
}

#DGuardar {
  cursor: pointer;
  float: left;
  border: 0;
  margin: 18px 10px 0 20px;
  background: url('http://factusyn.es/Iconos.png') no-repeat;
  background-position: 0px -197px;
  background-size: 106px;
  width: 46px;
  height: 46px;
}

#DGuardar:hover {
  background-position: -57px -197px;
}

#DImprimir {
  cursor: pointer;
  float: left;
  border: 0;
  margin: 18px 10px;
  background: url('http://factusyn.es/Iconos.png') no-repeat;
  background-position: 0px -102px;
  background-size: 106px;
  width: 46px;
  height: 46px;
}

#DImprimir:hover {
  background-position: -58px -102px;
}

#DEnviar {
  cursor: pointer;
  float: left;
  border: 0;
  margin: 15px 10px;
  background: url('http://factusyn.es/Iconos.png') no-repeat;
  background-position: 0px -149px;
  background-size: 106px;
  width: 45px;
  height: 46px;
}

#DEnviar:hover {
  background-position: -57px -149px;
}

#DCancelar {
  cursor: pointer;
  float: left;
  border: 0;
  margin: 15px 10px;
  background: url('http://factusyn.es/Iconos.png') no-repeat;
  background-position: 0px -0px;
  background-size: 106px;
  width: 46px;
  height: 46px;
}

#DCancelar:hover {
  background-position: -60px -0px;
}

.oculto {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<page size="A4" id="Pagina" class="insertarDoc">
  Hola soy una pagina
</page>

<div id="Menuopciones" class="oculto">
  <div id="DGuardar" title="Guardar" onClick="CancelarNuevoGrande('')">&nbsp;</div>
  <div id="DImprimir" title="Generar pdf" onClick="printContent('');">&nbsp;</div>
  <div id="DEnviar" title="Enviar pdf">&nbsp;</div>
  <div id="DCancelar" title="Cancelar y borrar">&nbsp;</div>
</div>
</div>

Origen Enlace
Killpe
  • 1.2k
  • 2
  • 22
  • 47

Cambio de opacidad en menu invisible

He hecho este menu http://codepen.io/killpe/pen/bgKNgy. En el que al entrar el cursor en la pagina cambia su opacidad a un 50% y al ponerte sobre el, se pone con el 100% de opacidad. Como veis mas o menos funciona, pero al ponerte sobre el desaparece, vuelve a aparecer un par de veces hasta que definitivamente se queda con el 100% de opacidad.

¿Que he hecho mal para que haga ese salto en vez de simplemente al ponerte encima cambie el valor al 100% sin salto? con salto no me refiero al bounce, si no a que desaparezca.

Muchas gracias por vuestra ayuda