Actualmente estoy tratando de hacer un menú con submenús.
Aquí es lo que yo quiero hacer.

Sobre pase un enlace (#mylink) quiero mostrar un div (vamos a llamarlo «#submenú») justo debajo de ella.
En el mouse dejo este enlace de una desea ejecutar una función después de 5 segundos.

En este intervalo de 5 segundos, si me pase de mi div (#submenú) quiero clearTimeout.
Así que este div no desapear después de 5 segundos.

Aquí está mi código :

$(document).ready(function()
{
    $("#mylink").hover(
        function ()
        {
            $('#submenu').show();
        },
        function()
        {
            var timer = setTimeout(function(){$('#submenu').hide();}, 5000);
        }
    );

    $("#submenu").hover(
        function ()
        {
            clearTimeout(timer);
        },
        function()
        {
            $('#submenu').show();
        }
    );
}
InformationsquelleAutor Franck HAMEL | 2012-04-24

4 Comentarios

  1. 12

    SLaks tiene la respuesta correcta, sino para elaborar en él, pondría var timer fuera de la función de controlador. Observe que en este ejemplo no hacer timer una variable global – sólo amplía su ámbito de aplicación para todos los controladores puede utilizar.

    $(document).ready(function(){
        var timer;
        $("#mylink").hover(
            function(){
                $('#submenu').show();
            }, function(){
                timer = setTimeout(function(){$('#submenu').hide();}, 5000);
            }
        );
    
        $("#submenu").hover(
            function(){
                clearTimeout(timer);
            }, function(){
                $('#submenu').show();
            }
        );
    }
    • Gracias a Jeff y SLaks funciona para mí.
  2. 5

    var timer es una variable local.

    No existe fuera de ese controlador.

    Que usted necesita para hacer que una variable global.

  3. 2

    Aquí es cómo iba a hacerlo

    var timer
    $("#mylink").mouseenter(function(){clearTimeout(timer);$('#submenu').show()})
    $("#mylink").mouseout(function(){timer = setTimeout(function(){$('#submenu').hide();}, 1000);})
  4. 1

    Si pones #submenú dentro de #mylink usted no necesita un segundo controlador de eventos para #submenú y usted tendría algo como esto:

    var timer;
    $(document).ready(function()
    {
        $('#mylink').hover(function()
        {
            clearTimeout(timer);
            $('#submenu').show();
        },function()
        {
            timer = setTimeout(function(){$('#submenu').hide();},5000);
        });
    }

    Por el camino, usted no necesita jQuery para esto. En la llanura js no será tan largo tiempo el código.

Dejar respuesta

Please enter your comment!
Please enter your name here