Retarder l'événement de survol de jquery ?

Question

Je voudrais retarder un événement de survol en jquery. Je lis un fichier lorsque l'utilisateur survole un lien ou une étiquette. Je ne veux pas que cet événement se produise immédiatement au cas où l'utilisateur déplacerait simplement la souris sur l'écran. Existe-t-il un moyen de retarder le déclenchement de l'événement ?

Merci.

Exemple de code :

$(function() {
    $('#container a').hover(function() {
        $('<div id="fileinfo" />').load('ReadTextFileX.aspx',
            {filename:'file.txt'},
            function() {
                $(this).appendTo('#info');
            }
         );
    },
        function() { $('#info').remove(); }
    });
});

UPDATE : (1/14/09) Après avoir ajouté le plugin HoverIntent, le code ci-dessus a été modifié comme suit pour l'implémenter. Très simple à mettre en œuvre.

$(function() {
    hiConfig = {
        sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
        interval: 200, // number = milliseconds for onMouseOver polling interval
        timeout: 200, // number = milliseconds delay before onMouseOut
        over: function() {
            $('<div id="fileinfo" />').load('ReadTextFileX.aspx', {filename:'file.txt'},
                function() {
                   $(this).appendTo('#info');
                }
             );
        }, // function = onMouseOver callback (REQUIRED)
        out: function() { $('#info').remove();  } // function = onMouseOut callback (REQUIRED)
    }
    $('#container a').hoverIntent(hiConfig)
}

Answer 1

Utilisez le plugin hoverIntent pour jquery : http://cherne.net/brian/resources/jquery.hoverIntent.html

Il est absolument parfait pour ce que vous décrivez et je l'ai utilisé sur presque tous les projets qui nécessitaient l'activation des menus au passage de la souris, etc...

Il y a un problème avec cette approche : certaines interfaces sont dépourvues d'un état de "survol", par exemple les navigateurs mobiles comme Safari sur l'iPhone. Vous risquez de masquer une partie importante de l'interface ou de la navigation sans qu'il soit possible de l'ouvrir sur un tel appareil. Vous pouvez contourner ce problème avec un CSS spécifique à l'appareil.

Answer 2

Vous devez vérifier l'existence d'un timer au survol. S'il n'existe pas (c'est-à-dire si c'est le premier survol), créez-le. S'il existe (c'est-à-dire que c'est le pas le premier vol stationnaire), le tuer et le redémarrer. Mettez la charge utile de la minuterie dans votre code.

$(function() {
    var timer;

    $('#container a').hover(function() {
        if(timer) {
            clearTimeout(timer);
            timer = null
        }
        timer = setTimeout(function() {
            $('<div id="fileinfo" />').load('ReadTextFileX.aspx',
                {filename:'file.txt'},
                function() {
                    $(this).appendTo('#info');
                }
            );
        }, 500)
    },
    // mouse out
    });
});

Je parie que jQuery a une fonction qui résume tout ça pour vous.

Modifier : Ah oui, Un plugin jQuery à la rescousse

Answer 3

Je suis tout à fait d'accord pour dire que hoverIntent est la meilleure solution, mais si vous êtes un malheureux qui travaille sur un site Web dont le processus d'approbation des plugins jQuery est long et fastidieux, voici une solution rapide et sale qui a bien fonctionné pour moi :

$('li.contracted').hover(function () {
    var expanding = $(this);
    var timer = window.setTimeout(function () {
        expanding.data('timerid', null);

            ... do stuff

    }, 300);
    //store ID of newly created timer in DOM object
    expanding.data('timerid', timer);
}, function () {
    var timerid = $(this).data('timerid');
    if (timerid != null) {
        //mouse out, didn't timeout. Kill previously started timer
        window.clearTimeout(timerid);
    }
});

Celui-ci est juste pour étendre un <li> si la souris est restée dessus pendant plus de 300ms.

Answer 4

Vous pourriez utiliser un appel setTimeout() avec un clearTimeout() sur l'événement mouseout.

Answer 5

Ma solution est simple. Retarder l'ouverture du menu si l'utilisateur garde le centre de la souris sur l'objet pendant plus de 300ms :

var sleep = 0;
$('#category li').mouseenter(function() {
    sleep = 1;
    $('#category li').mouseleave(function() {
        sleep = 0;
    });
    var ob = $(this);
    setTimeout(function() {                         
        if(sleep) {
            // [...] Example:
            $('#'+ob.attr('rel')).show();
        }
    }, 300);
});