87 votes

Retard jquery passez événement?

Je voudrais retard d'un vol stationnaire de l'événement en jquery. Je suis de la lecture à partir d'un fichier lorsque l'utilisateur survole un lien ou l'étiquette. Je ne veux pas que cet événement se produise immédiatement dans le cas où l'utilisateur est simplement en déplaçant la souris sur l'écran. Est-il un moyen de retarder le déclenchement de l'événement?

Je vous remercie.

Exemple de code:

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

Mise à JOUR: (1/14/09) Après l'ajout de la HoverIntent plugin le code ci-dessus a été modifié à la suite de la mettre en œuvre. 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)
}

85voto

sanchothefat Points 6402

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

C'est absolument parfait pour ce que vous décrivez et je l'ai utilisé à peu près tous les projets que nécessaire passage de la souris activation des menus etc...

Il y a une chasse aux sorcières à cette approche, certaines interfaces sont dépourvues d'un hover' état par exemple. mobile navigateurs comme safari sur l'iphone. Vous avez peut-être cacher une partie importante de l'interface et de la navigation avec aucun moyen de l'ouvrir sur un tel appareil. Vous pourriez aller faire un tour avec cette appareil CSS spécifique.

46voto

Crescent Fresh Points 54070

Vous avez besoin de vérifier une minuterie sur le vol stationnaire. Si elle n'existe pas (c'est à dire c'est la première hover), créez-la. Si elle existe (c'est à dire ce n'est pas le premier pointage), le tuer et de le redémarrer. Réglez la minuterie de charge utile à 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 encapsule tout cela pour vous.

Edit: Ah oui, plugin jQuery pour le sauvetage

8voto

Matthew Millman Points 180

Tout à fait d'accord que hoverIntent est la meilleure solution, mais si vous arrive d'être un malheureux gazon qui travaille sur un site web avec un long processus de longue haleine, pour l'approbation des plugins jQuery, voici un moyen rapide et sale de la solution 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);
    }
});

Cette une est juste pour l'expansion d'un <li> si la souris est sur elle pour plus de 300ms.

5voto

Dan Monego Points 3203

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

-2voto

onekamil Points 1

Ma solution est facile. Retard ouvrir le menu si l'utilisateur de garder mouseenter sur obj 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);
});

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by: