Visa bara om mouseover längre än 1 sekund

2011-06-07, 17:50 #1

Medlem

Reg: Jun 2006

Inlägg: 27

Jag har ett script här som visar #name om man tar musen över #block.

Vad jag vill göra är att lägga till ett villkor så att man måste ha musen över #block minst 1 sekund för att #name ska visas. Så drar man bara pekaren snabbt över #block händer ingenting. Har försökt få till detta med setTimeout/clearTimeout men får det inte att funka.

Har någon en lösning på mitt problem är jag evigt tacksam!

Kod:

<script type="text/javascript">
$("#block{IMAGE_ID}").mouseover(function () {
$("#name{IMAGE_ID}").show();
});
$("#block{IMAGE_ID}").mouseleave(function() {
$("#name{IMAGE_ID}").hide();
});
</script>

Citera

2011-06-07, 18:21 #2

Medlem

Reg: Feb 2008

Inlägg: 2 293

Kod:

var iTmr;
$("#block").mouseover(function () {
	iTmr = window.setTimeout(function(){
		$("#name").show();
	},1000);
});
$("#block").mouseleave(function() {
	window.clearTimeout(iTmr);
	$("#name").hide();
});

Citera

2011-06-07, 19:00 #3

Medlem

Reg: Jun 2006

Inlägg: 27

När jag provar det här så blir det bara en delay effekt på 1000 även fast man drar bort musen från #block, verkar som att den inte reagerar på clearTimeout(?). Även hide strular lite då man måste hålla pekaren över block 1000 innan man drar bort pekaren för att #name ska försvinna.

Citera

2011-06-07, 20:43 #4

Medlem

Reg: Feb 2008

Inlägg: 2 293

Citat:

Ursprungligen postat av Joone

När jag provar det här så blir det bara en delay effekt på 1000 även fast man drar bort musen från #block, verkar som att den inte reagerar på clearTimeout(?). Även hide strular lite då man måste hålla pekaren över block 1000 innan man drar bort pekaren för att #name ska försvinna.

Det funkar precis som du beskrivit - inga problem här. Befinner sig muspekaren över #block i 1000 msek så visas #name. Så fort du flyttar muspekaren bort från #block, kommer #name gömmas om den redan visades, annars kommer #name inte visas alls.

HTML-kod:

<html>
<head>


<script src="./jquery.js"></script>
<script language="javascript" >
$(
	function () {
		var iTmr;
		$("#block").mouseover(function () {
			iTmr = window.setTimeout(function(){
				$("#name").show();
			},1000);
			
		});
		$("#block").mouseleave(function() {
			window.clearTimeout(iTmr);
			$("#name").hide();
		});
	}
);
</script>


</head>
<body>
<div style="width:100px; height:100px; background:Red;" id="block"></div>
<div style="width:100px; height:100px; background:blue; display:none;" id="name"></div>
</body>
</html>

Citera

2011-06-07, 20:54 #5

Medlem

Reg: Feb 2010

Inlägg: 212

http://jsfiddle.net/dDhmN/

La upp W.Irvings kod. Den funkar.

Citera

2011-06-07, 21:07 #6

Medlem

Reg: Jun 2006

Inlägg: 27

Antar att jag får problem för att scriptet ligger i en loop, därav {IMAGE_ID}

__________________
Senast redigerad av Joone 2011-06-07 kl. 21:22.

Citera

2011-06-07, 22:00 #7

Medlem

Reg: Feb 2008

Inlägg: 2 293

Citat:

Ursprungligen postat av Joone

Antar att jag får problem för att scriptet ligger i en loop, därav {IMAGE_ID}

Observera att du då måste deklarera ett timerid för varje IMAGE_ID. Föredragsvis i ett objekt där varje index är bildens id.

Citera

2011-06-08, 16:56 #8

Medlem

Reg: Jun 2006

Inlägg: 27

Jag tror jag förstår vad du menar men får det inte att fungera. Jag är nybörjare på javascript så har gjort ett försök med den lilla kunskap jag har.

Kod:

<script language="javascript" >
$(
	function () {
		var i = {IMAGE_ID}
		var iTmr[i];
		$("#block{IMAGE_ID}").mouseover(function () {
			iTmr[i] = window.setTimeout(function(){
				$("#name{IMAGE_ID}").show();
			},1000);
			
		});
		$("#block{IMAGE_ID}").mouseleave(function() {
			window.clearTimeout(iTmr[i]);
			$("#name{IMAGE_ID}").hide();
		});
	}
);
</script>

Citera

Visa bara om mouseover längre än 1 sekund

Skapa ett konto eller logga in för att kommentera

Skapa ett konto

Logga in