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** <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> $("#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'); }); <!-- language: lang-css --> 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; } <!-- language: lang-html --> <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> <!-- end snippet -->