[JQuery] Flimmer vid hover

jayzee · 2011-05-15, 16:23

Hej,

jag har ett problem jag kan lösa på ett sätt men tycker att lösningen i fråga är kanske för invecklad. Hoppas att någon av Er har stött på liknande problem och har en bättre lösning.

Syfte:
Skapa en kopia av en fördefinerade div:en imgIcon och lägga in denna kopia inuti en annan div med klassen "myImg" när man hovrar över denna.

Problemet:
När man kommer med musen över den innehållet som tillhör imgIcon inuti myImg tas imgIcon bort, så fort den är borttagen triggas hover eventet igen som i sin tur skapar en ny kopia som då direkt tas bort (eftersom musen ligger över den) och plötsligt har vi hamnar i en loop som orsakar flimmer.

Lösning: Min lösning är att titta på imgIcon position samt storlek och jämföra dessa med vart musen befinner sig. Dock tycker jag denna lösning är lite "over kill" och det borde finnas någon enklare metod, såsom att veta vilket element man hamnat på vid mouseleave?

Kod:

$('.myImg').hover(function() {
  $('#imgIcon').clone().appendTo($(this).parent()).show();
}, function() {
  $(this).siblings('#imgIcon').remove();
});

RLM_JP · 2011-05-16, 09:11

Jag har funderat fram och tillbaka på lösningar, men just att en kopia skapas och tas bort gör att det blir knepigt. Du kan möjligen inte skapa en 'dold' kopia i ett tidigare skede som sedan bara visas och göms med display:block/none el.dyl. ? Då kan du sätta samma css-regel på innehållet i myImg (.myImg:hover *imgIconklon* {} )som på själva myImg.

andi · 2011-05-16, 09:44

Nu vet jag inte om jag fattade rätt när du beskrev hur det skulle fungera, men kan man inte ta bort eventet när det triggats en gång? Eller bara lägga till innehållet om DIVen är tom, dvs lägga till en IF-sats i event-koden?

jayzee · 2011-05-16, 10:40

Citat:

Ursprungligen postat av andi

Nu vet jag inte om jag fattade rätt när du beskrev hur det skulle fungera, men kan man inte ta bort eventet när det triggats en gång? Eller bara lägga till innehållet om DIVen är tom, dvs lägga till en IF-sats i event-koden?

Jag förstår att min beskrivning kan vara något knepig att förstå

Enkelt uttryckt så har jag en bild där bildkontroller skall visas (ta bort, etc.) över själva bilden när bilden hovras. Bildkontrollerna i fråga finns redan på sidan i form av en gömd <div> (display:none). När man hovrar över bilden visas kontrollerna men så fort du skall hovra över själva kontrollen tas kontrollen bort/läggs till/osv.

pelmered · 2011-05-16, 14:46

Har lite svårt att hänga med i vad du menar men kan du inte bara sätta en timeout på någon sekund på mouseout eventet(eller något annat lämpligt ställe) så att den inte tar bort direkt?

allstars · 2011-05-16, 16:01

kan du använda dig av background-position eller position:absolute istället och visa/dölja på det sättet?!

Är det så himla bra att klona ett element med id?!

jayzee · 2011-05-16, 16:50

Jag löste problemet, det visade sig att jag injicerade klonen på fel ställe vilket gjorde att hover-eventet inte gällde för den.

allstars: Jag kör egentligen med klass på "skarpa" koden, detta var ett snabbt exempel. Se nedan.

Ni som undrar vad jag egentligen menade (med korrekt kod):

HTML-kod:

<!doctype html>
<head>
<title>Hover test</title>
<style type="text/css">
.myImg {
	display:block;
	position:relative;
	background:#fff;
	padding:8px;
	border:1px solid #999;
	width:480px;
	height:640px;
}

.imgIcon {
	position:absolute;
	right:20px;
	bottom:20px;
	display:none;
}
</style>
</head>
<body>
<div class="myImg">
<img src="http://netwrok.us/stuff/save-the-internets.jpg" />
</div>
<div class="imgIcon">
	<img src="http://media.bigoo.ws/content/icon/funny/funny_198.gif" />
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

	$('.myImg').hover(function() {
		$('.imgIcon').clone().appendTo($(this)).show();
	}, function() {
		$(this).children('.imgIcon').remove();
	});

});
</script>
</body>
</html>

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

[JQuery] Flimmer vid hover