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('')"> </div>
<div id="DImprimir" title="Generar pdf" onClick="printContent('');"> </div>
<div id="DEnviar" title="Enviar pdf"> </div>
<div id="DCancelar" title="Cancelar y borrar"> </div>
</div>
</div>
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 delpage
?page
, cuando se esté sobre las herramientas, solo cambiar la opacidad.