DevProTalk

Forumi IT profesionalaca
web development, web design, e-business, SEO


Idite nazad   DevProTalk > Web development i web aplikacije > (X)HTML, JavaScript, DHTML, XML, CSS
Želite da se reklamirate ekskluzivno na ovoj poziciji? Javite se

(X)HTML, JavaScript, DHTML, XML, CSS Client scripting tehnologije, Dynamic HTML, Cascading Stylesheets, XML i standardi

Odgovori
 
Alati teme Način prikaza
Staro 31. 08. 2008.   #1
Damjan
novi član
Na probnom radu
 
Avatar Damjan
 
Datum učlanjenja: 16.07.2008
Poruke: 17
Hvala: 1
0 "Hvala" u 0 poruka
Damjan is on a distinguished road
Default jQuery hover

Pozdrav!

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

Ovo je kod:

Kôd:
$('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
Damjan je offline   Odgovorite uz citat
Staro 31. 08. 2008.   #2
bluesman
Goran Pilipović
Sir Write-a-Lot
 
Avatar bluesman
 
Datum učlanjenja: 18.05.2005
Lokacija: Beograd
Poruke: 5.450
Hvala: 288
1.247 "Hvala" u 446 poruka
bluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušati
Pošaljite ICQ poruku za bluesman
Default

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

$('div.kontejner').hover(
function() {$('div', this).fadeIn(); },
function() {$('div', this).fadeOut();}
);
__________________
Goran Pilipović a.k.a. Ugly Fingers Bradley f.k.a. bluesman
I don't always know what I'm talking about but I know I'm right!
bluesman je offline   Odgovorite uz citat
Staro 31. 08. 2008.   #3
Damjan
novi član
Na probnom radu
 
Avatar Damjan
 
Datum učlanjenja: 16.07.2008
Poruke: 17
Hvala: 1
0 "Hvala" u 0 poruka
Damjan is on a distinguished road
Default

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.
Damjan je offline   Odgovorite uz citat
Staro 31. 08. 2008.   #4
bluesman
Goran Pilipović
Sir Write-a-Lot
 
Avatar bluesman
 
Datum učlanjenja: 18.05.2005
Lokacija: Beograd
Poruke: 5.450
Hvala: 288
1.247 "Hvala" u 446 poruka
bluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušati
Pošaljite ICQ poruku za bluesman
Default

aha, ... ja sam mislio da ti je problem sto svi iskoce od jednom. Pa onda probaj sa .one()
__________________
Goran Pilipović a.k.a. Ugly Fingers Bradley f.k.a. bluesman
I don't always know what I'm talking about but I know I'm right!
bluesman je offline   Odgovorite uz citat
Staro 31. 08. 2008.   #5
Damjan
novi član
Na probnom radu
 
Avatar Damjan
 
Datum učlanjenja: 16.07.2008
Poruke: 17
Hvala: 1
0 "Hvala" u 0 poruka
Damjan is on a distinguished road
Default

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.
Damjan je offline   Odgovorite uz citat
Staro 31. 08. 2008.   #6
pkrstic
profesionalac
Qualified
 
Avatar pkrstic
 
Datum učlanjenja: 06.09.2007
Lokacija: Zrenjanin
Poruke: 109
Hvala: 21
11 "Hvala" u 11 poruka
pkrstic is on a distinguished road
Default

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

function() { if ($(this)._hover) { $(this)._hover=false; $('div', this).fadeOut(); } }
);
pkrstic je offline   Odgovorite uz citat
Staro 31. 08. 2008.   #7
bluesman
Goran Pilipović
Sir Write-a-Lot
 
Avatar bluesman
 
Datum učlanjenja: 18.05.2005
Lokacija: Beograd
Poruke: 5.450
Hvala: 288
1.247 "Hvala" u 446 poruka
bluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušati
Pošaljite ICQ poruku za bluesman
Default

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...
__________________
Goran Pilipović a.k.a. Ugly Fingers Bradley f.k.a. bluesman
I don't always know what I'm talking about but I know I'm right!
bluesman je offline   Odgovorite uz citat
Staro 31. 08. 2008.   #8
bluesman
Goran Pilipović
Sir Write-a-Lot
 
Avatar bluesman
 
Datum učlanjenja: 18.05.2005
Lokacija: Beograd
Poruke: 5.450
Hvala: 288
1.247 "Hvala" u 446 poruka
bluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušati
Pošaljite ICQ poruku za bluesman
Default

Evo sad si me "naterao" da probam
Kôd:
$('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...
__________________
Goran Pilipović a.k.a. Ugly Fingers Bradley f.k.a. bluesman
I don't always know what I'm talking about but I know I'm right!
bluesman je offline   Odgovorite uz citat
"Hvala" bluesman za poruku:
Staro 31. 08. 2008.   #9
bluesman
Goran Pilipović
Sir Write-a-Lot
 
Avatar bluesman
 
Datum učlanjenja: 18.05.2005
Lokacija: Beograd
Poruke: 5.450
Hvala: 288
1.247 "Hvala" u 446 poruka
bluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušatibluesman je osoba koju treba slušati
Pošaljite ICQ poruku za bluesman
Default

Evo ti i u obliku jquery funkcije

Kôd:
$.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:

Kôd:
$('.hover').hoverable()
a posto ima return, mozes da se nastavljas ...

Kôd:
$('.hover').hoverable().css('color', 'red');
Pre toga, recimo imas ovakav html:

HTML kôd:
<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
__________________
Goran Pilipović a.k.a. Ugly Fingers Bradley f.k.a. bluesman
I don't always know what I'm talking about but I know I'm right!
bluesman je offline   Odgovorite uz citat
Staro 31. 08. 2008.   #10
Damjan
novi član
Na probnom radu
 
Avatar Damjan
 
Datum učlanjenja: 16.07.2008
Poruke: 17
Hvala: 1
0 "Hvala" u 0 poruka
Damjan is on a distinguished road
Default

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..
Damjan je offline   Odgovorite uz citat
Odgovori



Pravila pisanja
Možete ne započinjati nove teme
Možete ne slati odgovore
Možete ne slati priloge
Možete ne izmeniti svoje poruke
vB kôd je Uključen
Smajliji su Uključen
[IMG] kod je Uključen
HTML kôd je Isključen
Pogledajte forum

Slične teme
Tema Početna poruka teme Forum Odgovori Poslednja poruka
jQuery hover Ivan Sva početnička pitanja 3 23. 03. 2010. 15:24
[css menu] List, hover Ivan Sva početnička pitanja 6 27. 01. 2008. 00:30
hover na <p> (IE) [nq] (X)HTML, JavaScript, DHTML, XML, CSS 7 15. 05. 2007. 23:28
jQuery i Ext Ilija Studen (X)HTML, JavaScript, DHTML, XML, CSS 7 02. 03. 2007. 12:25
Hover efekat na "area" elementu? Milos Vukotic (X)HTML, JavaScript, DHTML, XML, CSS 9 06. 04. 2006. 01:56


Vreme je GMT +2. Trenutno vreme je 01:33.


Powered by vBulletin® Verzija 3.6.8
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright © DevProTalk. All Rights Reserved.
Mišljenja, saveti, izjave, ponude ili druge informacije ili sadržaji nastali na Sajtu su vlasništvo onoga ko ih je kreirao, a ne DevProTalk.com, tako da ne morate da se oslanjate na njih.
Autori poruka su jedini odgovorni za ovakve sadržaje. DevProTalk.com ne garantuje tačnost, kompletnost ili upotrebnu vrednost informacija, stavova, saveta ili datih izjava. Ne postoje uslovi pod kojima bi mi bili odgovorni za štetu ili gubitak koji je posledica bilo čijeg oslanjanja na nepouzdane informacije, ili bilo kakve informacije nastale kroz komunikaciju između registrovanih članova.
Web sajt može sadržavati linkove na druge web sajtove na Internetu ili neke druge sadržaje. Ne kontrolišemo niti podržavamo te druge web sajtove, niti smo pregledali bilo kakve sadržaje na takvim sajtovima. Mi nećemo biti odgovorni za legalnost, tačnost ili prikladnost bilo kog sadržaja, oglasa, proizvoda, usluga ili informacije lociranim na ili distribuiranih kroz druge web sajtove, niti za bilo kakvu štetu nastalu kao posledica takvih informacija. DevProTalk.com drži i čuva druga prava vlasništva na web sajtu. Web sajt sadrže materijale zaštićene copyright-om, zaštitne znakove i druge informacije o pravu vlasništva ili softver. Članovi mogu poslatu informacije zaštićene pravima vlasništva njihovih nosilaca i ona ostaju zaštićena bez obzira da li su oni koji prenose te informacije to naveli ili ne. Osim informacija koje su u javnom vlasništvu ili za koje dobijete dozvolu, nemate pravo da kopirate, modifikujete ili na bilo koji način menjate, objavljujete, prenosite, distribuirate, izvršavate, prikazujete ili prodajte bilo koju informaciju zaštićenu pravima vlasništva. Slanjem informacija ili sadržaja na bilo koji deo DevProTalk.com, Vi automatski dozvoljavate i predstavljate garanciju da imate pravo da dozvolite DevProTalk.com ili članovima DevProTalk.com bespovratnu, kontinualnu, neograničenu, globalnu dozvolu da koriste, kopiraju, izvršavaju, prikazuju i distribuiraju takve informacije i sadržaje i da iz takvih sadžaja koriste bilo koji deo u bilo koje svrhe, kao i pravo i dozvolu da koriste gore navedene sadržaje. Svi zaštitni znakovi (trademarks), logotipi, oznake usluga, firme ili imena proizvoda koji se pominju na ovom web sajtu su vlasništvo kojim raspolažu njihovi vlasnici.