3

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

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>

5
  • No logro entender tu problema. El caso de la opacidad es resuelta correctamente, cuando se entra al page se pone al 50% y cuando se entra al contenedor de opciones, se muesta al 100%. ¿Hablas de la opacidad al 100% cuando se sale del page?
    – gugadev
    Commented el 4 feb. 2017 a las 18:10
  • no, cuando te pones dentro del propio menu, desaparece y vuelve a aparecer iniciando la animación desde 0, en ese punto solo tendría que ponerse con opacidad 100%
    – Killpe
    Commented el 4 feb. 2017 a las 18:22
  • Ya entiendo. La animación solo debe hacerse cuando se ingrese a page, cuando se esté sobre las herramientas, solo cambiar la opacidad.
    – gugadev
    Commented el 4 feb. 2017 a las 18:23
  • Si @guzgarcia exactamente eso
    – Killpe
    Commented el 4 feb. 2017 a las 18:24
  • 1
    @Killpe sería bueno de actualizar tu pregunta con estas clarificaciones, así lo haces mas fácil para otros de entender lo que quieres. Commented el 4 feb. 2017 a las 19:06

1 respuesta 1

3

En primer lugar, puedes hacer lo mismo con CSS. Si lo puedes hacer con CSS, hazlo.

En el ejemplo que te pongo, el truco está en saber si el evento mouseleave de #Página se origina dentro de #Menuopciones. Si este es el caso, debe evitarse la animación. Esto lo hacemos mediante document#elementFromPoint. Además, he añadido un pequeño timeout para que añade la clase oculto a #Menuopciones una vez que termina la animación.

Ejemplo

$("#Menuopciones").on('mouseenter', onOptionsHover);
$("#Menuopciones").on('mouseleave', onOptionsBlur);
$("#Pagina").on('mouseenter', onPageEnter);
$("#Pagina").on('mouseleave', onPageLeave);

function onPageEnter () {
  $("#Menuopciones")
    .removeClass('oculto')
    .removeClass('bounceOut')
    .addClass('bounceIn');
}

function onPageLeave (e) {
  let x = e.clientX;
  let y = e.clientY;
  // obtiene el elemento de acuerdo a la posición del puntero
  let realTarget = document.elementFromPoint(x, y);
  
  if (realTarget.id !== 'Menuopciones') {
    $("#Menuopciones")
      .removeClass('bounceIn')
      .addClass('bounceOut');
    // cuando acabe la animación, añade la clase oculto
    window.setTimeout(function () {
      $('#Menuopciones').addClass('oculto');
    }, 500);
  }
}

function onOptionsHover () {
  $(this).css("opacity", "1");
}

function onOptionsBlur () {
  $(this).css("opacity", ".4");
}
page[size="A4"] {
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  margin-top: 0.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://ajax.googleapis.com/ajax/libs/jquery/2.1.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>

2
  • Genial, funciona perfectamente, también metiendo el #menuopciones dentro del page funcionaba bien, pero me gusta mas tu opción que aunque lleva mas codigo parece mas estable y me permite jugar con la posición del menu
    – Killpe
    Commented el 4 feb. 2017 a las 21:33
  • Me alegro que te haya servido. Saludos.
    – gugadev
    Commented el 4 feb. 2017 a las 21:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.