11548 sujets

JavaScript, DOM et API Web HTML5

[RESOLU]JQuery : condition si la souris est sur l'élément

Bonjour,

J'ai un petit soucis en jQuery. J'ai un bloc qui se "cache" à un certain moment quand la page est affiché, et je voudrais que ce bloc reste visible si l'utilisateur place son curseur dans ce bloc.

Voilà comment je cache le bloc :

		setTimeout(function () {
			jQuery("#Bloc_accesDirect").animate({
				top: "150px"
			}, 900 );
		}, 1000 );


J'ai essayé différentes choses, la dernière en suivant la solution donné ici ce qui m'a donné ce code :

		jQuery('#Bloc_accesDirect').hover(
			function() { jQuery.data(this, 'hover', true); },
			function() { jQuery.data(this, 'hover', false); }
		).data('hover', false);
		
		if ($('#Bloc_accesDirect').data('hover')) {
			//Ne rien faire
		} else {
			setTimeout(function () {
				jQuery("#Bloc_accesDirect").animate({
					top: "150px"
				}, 900 );
			}, 1000 );
		}

Mais bon ça marche pas... En espérant que quelqu'un puisse me venir en aide, merci d'avance !
Modifié par exootia (15 Jun 2012 - 13:59)
Salut !

Essaie d'utiliser les évènements "mouseenter" et "mouseleave".
Modifié par akaFlem (15 Jun 2012 - 12:08)
Bonjour,

Sans te donner la réponse, voila à quoi ca devrait ressembler.

var VarNameForSetTimeOut = setTimeout(function () {
			jQuery("#Bloc_accesDirect").animate({
				top: "150px"
			}, 900 );
		}, 1000 );

if hover or focus >> clearTimeout(VarNameForSetTimeOut);
VarNameForSetTimeOut = null;

Modifié par rs459 (15 Jun 2012 - 12:17)
Dans l'idée de rs459 Smiley cligne , j'ai testé cette solution qui à l'air de fonctionner


<!doctype html>
<head>
  <meta charset="utf-8">
  <title>test box</title>
 
  <style>
	#Bloc_accesDirect{
		position:absolute;
		top:0;
		right:0;
		width:300px;
		height:200px;
		background: #ff0000;
	}
  </style>
</head>

<body>
	<div id="Bloc_accesDirect"></div>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="../js/libs/jquery-1.7.1.min.js"><\/script>')</script>
  <script>
	  $(function() {
		  function initBlocAccess(){
			   VarNameForSetTimeOut = setTimeout(function () {
				jQuery("#Bloc_accesDirect").animate({
					top: "-200px"
				}, 900 );
			}, 1000 );
		  }
		  initBlocAccess();
		 
		  jQuery("#Bloc_accesDirect").bind("mouseenter",function(){
			  clearTimeout(VarNameForSetTimeOut);
			  VarNameForSetTimeOut = null;
		  }).bind("mouseleave",function(){
			  initBlocAccess();
		  });
		
	  });
  </script>
</body>
</html>


Voilà un petit lien pour tester
Modifié par akaFlem (15 Jun 2012 - 13:08)
Je préfère on() plutot que bind() qui devrait disparaitre dans les future version de Jquery.

Et surtout déclarer avec var la variable pour ne pas polluer le scope global.

http://jsfiddle.net/yUXdc/3/


EDIT : correction il fallait lire variable au lieu de fonction.
Modifié par rs459 (15 Jun 2012 - 18:21)
J'ai modifié mon script en utilisant on selon tes conseils, mais en quoi c'est mieux que d'utiliser bind ? ^^
Bind() est beaucoup plus lent.

Tu peux faire le test ici, et regarder les graphs à la fin.

http://jsperf.com/jquery-live-vs-delegate-vs-on/4

Ensuite la documentation jquery pour bind() donne ceci :

[…]
As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. For earlier versions, the .bind() method is used for attaching an event handler directly to elements. Handlers are attached to the currently selected elements in the jQuery object, so those elements must exist at the point the call to .bind() occurs. For more flexible event binding, see the discussion of event delegation in .on() or .delegate().
[…]

Sans parler de la syntaxe qui plus lisible et compréhensible.
Sujet clos
Aller à