jQuery hover

[Damjan]

Pozdrav!

Treba mi pomoc oko hover event-a u jQuery-ju.

Ovo je kod:

$('div.kontejner').hover(
		function() {$('divkontejner div').fadeIn(); },
		function() {$('div.kontejner div').fadeOut();}
	);

A problem je u tome sto mi pamti koliko sam puta presao misem preko kontejnera i toliko puta odradi efekat fadeIn + fadeOut nad unutrasnjim divovima.
Kako da izbjegnem ovaj efekat pamcenja preleta misem, tj da dok traju efekti ne hvata nove event-e?

Hvala

[bluesman]

Nisam "majstor", poceo sam tek pre par nedelja da koristim jquery, ali evo:

$('div.kontejner').hover(
function() {$('div', this).fadeIn(); },
function() {$('div', this).fadeOut();}
);

[Damjan]

Hvala na brzom odgovoru ali ne ponasa se nista drugacije.

Dakle, ako neko manicno pomjera misa po stranici i preleti vise puta preko diva kontejner onda se odradi taj broj puta efekat animacije nad unutrasnjim divovima.
Ja bih da to uradi samo jednom, tj da ne hvata nove event-e (mouseover) dok god se ne zavrse animacije.

[bluesman]

aha, ... ja sam mislio da ti je problem sto svi iskoce od jednom. Pa onda probaj sa .one()

[Damjan]

Ali onda mi posle prve reakcije nece vise reagovati na prelazak misa, zar ne?
Ja zelim da iskljucim reakcije samo dok traju animacije.

Ovo ponasanje izaziva trajanje animacija, ako fadeIn/Out() zamjenim sa show/hide() (koje su trenutne) vise nema tog pamcenja prelazaka misa (kada misem brzo preletim vise puta uzastopce).
Pa je odgovor vjerovatno u queue() i dequeue() ali moji pokusaji njihovog koristenja nisu dali odgovarajuce rezultate.

Upravo sam otkrio da sam jquery.com pati od istog problema.
Uvjerite se sami: na pocetnoj stranici vise puta brzo preletite misem preko "Lightweight", "CSS3 Compliant" ili "Cross-browser" pa cete vidjeti efekat pamcenja koji mi smeta.

[pkrstic]

$('div.kontejner').hover(
function() {if (!$(this)._hover) { $(this)._hover=true; $('div', this).fadeIn(); } },

function() { if ($(this)._hover) { $(this)._hover=false; $('div', this).fadeOut(); } }
);

[bluesman]

Eto, tek sada pocinjem da razumem sta te muci

Jedini nacin je da pratis da li je event "jos u toku" odnosno da dodas jos jednu callback funkciju za fadein & out, fadeOut('fast', function() { } )

Ta callback funkcija se izvrsava jada se zavrsi i fade animacija, ... sada bih morao da probam, ali prvo sto mi pada napamet je da na mouseover unbind-ujes event, pa u tom callback da ga ponovo bind-ujes... Mozda ces morati da umesto .hover() koristis mouseover() i mouseout(), ne znam kako ce hover da se ponasa sa tim (un)bind-ovima.

Ili da imas jednu varijablu u kojoj drzis da li je over ili out... imas i $(el).data();... mozes i tu...

[bluesman]

Evo sad si me "naterao" da probam

$('div.kontejner').hover
(
	function()
	{
		if (!$(this).data('on'))
		{
			$(this).data('on',1);
			$('div', this).fadeIn('fast', function()
			{
				$(this).parent().removeData('on');
			});
		}
	},
	function() { $('div', this).fadeOut(); }
);

^ ovo radi (valjda) kako ti zelis.... namerno sam ovako napisao da bi bilo citljivije, koliko sam ja video, najvise ponovi jos samo jednom, nema onog reda pa ponovo 20 puta...

[bluesman]

Evo ti i u obliku jquery funkcije

$.fn.hoverable = function()
{
	var t = this;
	$(this).each (function (i)
	{ 
		$(this).parent().css('cursor', 'pointer').hover (
			function()
			{
				if (!$(this).data('on'))
				{
					$(this).data('on',1);
					$(t, this).eq(i).fadeIn('fast', function()
					{
						$(this).parent().removeData('on');
					});
				}
			},
			function() { $(t, this).eq(i).fadeOut(); }
		);
	} );
	return $(this);
};

pa je onda pozoves recimo ovako:

$('.hover').hoverable()

a posto ima return, mozes da se nastavljas ...

$('.hover').hoverable().css('color', 'red');

Pre toga, recimo imas ovakav html:

<div>
	jedan tekst
	<div class="hover" style="display:none; position:absolute; background:green;">ovo ide na tekst 1</div>
</div>
	  
<span>
	drugi tekst
<div class="hover" style="display:none; position:absolute; background:yellow;">A ovo je na tekst 2</div>
</span>

Moze verovanto i jednostavnije, ali kao sto rekoh, ja sam tek odnedavno u tome, i to sam bio "nateran" da pocnem

[Damjan]

Svaka cast bluesman, vidim da se dobro snalazis sa jQuery-jem
Radi onako kao sto si rekao, ponovi jos jedan put, sto je mnogo bolje od 20

Pokusacu naci nacin da izbacim i to dodatno 1 ponavljanje kasnije, zasad je i ovako dobro..