- -
jQuery hover
(
http://www.devprotalk.com/showthread.php?t=6107)
| Damjan |
30. 08. 2008. 23:37 |
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 :) |
| bluesman |
31. 08. 2008. 00:40 |
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 |
31. 08. 2008. 00:57 |
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 |
31. 08. 2008. 01:13 |
aha, ... ja sam mislio da ti je problem sto svi iskoce od jednom. Pa onda probaj sa .one()
|
| Damjan |
31. 08. 2008. 01:27 |
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 |
31. 08. 2008. 02:14 |
$('div.kontejner').hover(
function() {if (!$(this)._hover) { $(this)._hover=true; $('div', this).fadeIn(); } },
function() { if ($(this)._hover) { $(this)._hover=false; $('div', this).fadeOut(); } }
);
|
| bluesman |
31. 08. 2008. 02:15 |
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 |
31. 08. 2008. 02:26 |
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... |
| bluesman |
31. 08. 2008. 02:59 |
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 :) |
| Damjan |
31. 08. 2008. 16:28 |
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..
|
| Vreme je GMT +2. Trenutno vreme je 12:41. |
|
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.
