Opacity change in invisible menu

Question

Opacity change in invisible menu

Navigation

#1 by (3 votes)

3

I've made this menu link . In which when entering the cursor on the page changes its opacity to 50% and when you put on it, it is 100% opacity. As you can see, it works more or less, but when you put it on it disappears, it reappears a couple of times until it definitely stays with 100% opacity.

What have I done wrong for him to make that jump instead of just putting on you change the value to 100% without jumping? with jump I do not mean the bounce, but it disappears.

Thank you very much for your help

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>

jquery html css3 css

asked by Killpe 04.02.2017 в 18:22

source

1 answer

How to embed app nodejs in java application Prevent TempData from becoming null when reloading view

score 3 · Accepted Answer

First, you can do the same with CSS. If you can do it with CSS, do it.

In the example I give you, the trick is to know if the event mouseleave of #Página originates within #Menuopciones If this is the case, the animation should be avoided. We do this through document#elementFromPoint . Also, I added a small timeout so that it adds the class oculto to #Menuopciones once the animation ends.

Example

$("#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>