0

tengo este codigo:

function Menuopciones(pagina,menu) {
timeout = 600;
var thread; 
$("#"+pagina).mousemove(function(){ 
    $("#"+menu).removeClass('oculto').addClass('bounceIn');
    clearTimeout(thread);
    thread = setTimeout(mousestopped, timeout);
});
function mousestopped(){ $("#"+menu).removeClass('bounceIn').addClass('oculto'); };
$("#"+menu).hover(function(){ $(this).css("opacity", "1"); }, function(){ $(this).css("opacity", ""); clearTimeout(thread); });
}

lo que estoy intentando es que al estar sobre $("#"+menu) se pare el setimeout para que no me oculte el menu.

¿que puedo estar haciendo mal?

function Menuopciones(pagina,menu) {
timeout = 600;
var thread; 
$("#"+pagina).mousemove(function(){ 
	$("#"+menu).removeClass('oculto').addClass('bounceIn');
	clearTimeout(thread);
	thread = setTimeout(mousestopped, timeout);
});
function mousestopped(){ $("#"+menu).removeClass('bounceIn').addClass('oculto'); };
$("#"+menu).hover(function(){ $(this).css("opacity", "1"); }, function(){ $(this).css("opacity", ""); });
$("#"+menu).draggable();
}
#Pagina { width:500px; height:500px; background-color: #CCC; }

.oculto { display: none; }

.MenuDocumentos { position: absolute; width: 290px; height: 100px; margin: 0 0 0 -140px; left: 50%; top: 50%; text-align: center; font-size: 40px; padding: 15px 5px; 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; }
.MenuDocumentos i { margin: 5px 10px; }
.DocGuardar:hover { color: green; }
.DocImprimir:hover { color: #2179ff; }
.DocEnviar:hover { color: #2179ff; }
.DocBorrar:hover { color: red; }
.MenuDocumentos select { 
font-size: 20px;
text-align: center;
margin-top: 10px;
padding: 10px 30px;
border-radius: 10px;
border: 0;
-webkit-appearance: none; -moz-appearance: none; appearance: none; }

@-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 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">

<script>Menuopciones('Pagina','MenuOpciones');</script>

<div id="MenuOpciones" class="MenuDocumentos oculto">
	<i class="fas fa-check DocGuardar" title="Guardar"></i>
	<i class="fas fa-print DocImprimir" title="Imprimir"></i>
	<i class="far fa-paper-plane DocEnviar" title="Enviar"></i>
	<i class="fas fa-recycle DocBorrar"></i>
	<p><select>
		<option selected value="">Opciones</option>
		<option value="Verpedido">Ver</option>
		<option value="sinvalor">Imprimir</option>
		<option value="proforma">Imprimir 2</option>
		<option value="eliminar">Eliminar</option>
	</select></p>
</div>

<div id="Pagina"></div>

No consigo que en el snippet funcione, de hecho ahora en la web tampoco va, se conoce que tenia activado pagespeed y me estaba tirando de cache... voy a intentar arreglarlo y actualizo el código aqui

4
  • Y que error obtienes? que no esta funcionando como deberia?
    – Alvarez
    el 18 dic. 2017 a las 20:50
  • que sigue ocultando el menu a pesar que estoy sobre el @LuisFernando
    – Killpe
    el 18 dic. 2017 a las 20:55
  • @Killpe por que no tratas de hacer un ejemplo que se pueda ejecutar en el snippet para poder ayudarte mejor ? el 18 dic. 2017 a las 20:56
  • voy a intentarlo @CamiloVasquez
    – Killpe
    el 18 dic. 2017 a las 20:57

1 respuesta 1

1

Lo único que debías hacer para "retener" la visibilidad del menú al estar sobre él era detener la ejecución del setTimeout() al momento de hacer el hover en el menú.

Te dejo tu código funcional.

$(document).ready(function(){
    function Menuopciones(pagina, menu) {
        timeout = 600;
        var thread; 
        
        $("#"+pagina).mousemove(function(){
            $("#"+menu).removeClass('oculto').addClass('bounceIn');
            clearTimeout(thread);
            thread = setTimeout(mousestopped, timeout);
        });
        
        $("#"+menu).hover(function(){ 
            clearTimeout(thread);
        });

        $("#"+menu).draggable();

        function mousestopped(){ 
            $("#"+menu).removeClass('bounceIn').addClass('oculto'); 
        };
    }

    Menuopciones('Pagina','MenuOpciones');
});
#Pagina { width:500px; height:500px; background-color: #CCC; }

.oculto { display: none; }

.MenuDocumentos { position: absolute; width: 290px; height: 100px; margin: 0 0 0 -140px; left: 50%; top: 50%; text-align: center; font-size: 40px; padding: 15px 5px; 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; }
.MenuDocumentos i { margin: 5px 10px; }
.DocGuardar:hover { color: green; }
.DocImprimir:hover { color: #2179ff; }
.DocEnviar:hover { color: #2179ff; }
.DocBorrar:hover { color: red; }
.MenuDocumentos select { 
font-size: 20px;
text-align: center;
margin-top: 10px;
padding: 10px 30px;
border-radius: 10px;
border: 0;
-webkit-appearance: none; -moz-appearance: none; appearance: none; }

@-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 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">

<div id="MenuOpciones" class="MenuDocumentos oculto">
    <i class="fas fa-check DocGuardar" title="Guardar"></i>
    <i class="fas fa-print DocImprimir" title="Imprimir"></i>
    <i class="far fa-paper-plane DocEnviar" title="Enviar"></i>
    <i class="fas fa-recycle DocBorrar"></i>
    <p><select>
        <option selected value="">Opciones</option>
        <option value="Verpedido">Ver</option>
        <option value="sinvalor">Imprimir</option>
        <option value="proforma">Imprimir 2</option>
        <option value="eliminar">Eliminar</option>
    </select></p>
</div>

<div id="Pagina"></div>

Te recomiendo agregar tu código dentro de un evento ready() al document para que se ejecute una vez hayan cargado todos los elementos del sitio

1
  • Genial :) te quieroooo. Mil gracías.
    – Killpe
    el 19 dic. 2017 a las 8:24

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.