Avaleht
uus teema   vasta Tarkvara »  WWW »  jquery, settimeout ja hover märgi kõik teemad loetuks
märgi mitteloetuks
vaata eelmist teemat :: vaata järgmist teemat
Hinnavaatlus :: Foorum :: Uudised :: Ärifoorumid :: HV F1 ennustusvõistlus :: Pangalink :: Telekavad :: HV toote otsing
autor
sõnum Saada viide sõbrale.  :: Teata moderaatorile teata moderaatorile
otsing:  
muusik
HV kasutaja

liitunud: 31.10.2007
sõnum 15.10.2011 15:41:10 jquery, settimeout ja hover vasta tsitaadiga
Vajadus: Lehte laadides laetakse div, mis peaks 5 sekundi jooksul kaduma. Juhul kui hiirega div'le minna, siis div eest ei kao, peale hoverit peaks 5 sekundit taas käima hakkama.

setTimeout(function() {
$('#box01-confirmation').fadeOut('fast');
}, 5000);

Sellega saan kenasti fadeouti, kuid kuidas hover sisse tuua?
Kommentaarid: 50 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 49
tagasi üles
vaata kasutaja infot saada privaatsõnum
Renka
HV Guru
Renka

liitunud: 01.04.2002
sõnum 15.10.2011 16:40:21 vasta tsitaadiga
javascript:
  1. $('selector').hover(function(){
  2.   clearTimeout($('#selector').data('timer'));
  3. },function(){
  4.   starttimer();
  5. });
  6.  
  7.  
  8. function starttimer() {
  9.   var timer = setTimeout();
  10.   $('selector').data('timer', timer);
  11. }
  12.  
  13. starttimer();
  14.  





Umbes nii. Põhimõte siis, et timeouti canceldad ära hoveri puhul ja bluri puhul käivitad uuesti.
_________________
There is no place like 127.0.0.1
Kommentaarid: 71 loe/lisa Kasutajad arvavad:  :: 2 :: 1 :: 61
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
andrusny
Kreisi kasutaja
andrusny

liitunud: 20.03.2006
sõnum 15.10.2011 16:57:13 vasta tsitaadiga
Tegin ka midagi
Renka
var timer = setTimeout();
ei saa sa funk sees teha, pead väljas defineerima ennem, muidu ei saa teise funk sees kasutada.


$(document).ready(function(){
var viide ;

function start(){
viide = setTimeout(function() {
$('#box01-confirmation').fadeOut('fast');
}, 5000);
}
 
$('#box01-confirmation').mouseover(function() {
clearTimeout(viide);
});

$('#box01-confirmation').mouseout(function() {
start();
});

start();
  });
 

_________________
Kommentaarid: 7 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 7
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
Renka
HV Guru
Renka

liitunud: 01.04.2002
sõnum 15.10.2011 17:02:36 vasta tsitaadiga
andrusny, sa ikka lugesid ka mu koodi icon_rolleyes.gif
_________________
There is no place like 127.0.0.1
Kommentaarid: 71 loe/lisa Kasutajad arvavad:  :: 2 :: 1 :: 61
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
andrusny
Kreisi kasutaja
andrusny

liitunud: 20.03.2006
sõnum 15.10.2011 17:43:18 vasta tsitaadiga
Jah, isegi proovisin andis veateate kohe sellel reale, nüüd vaatasin täpsemalt ta ei ütle, et muutuja puudub vaid vale argument sellel real. var timer = setTimeout(); ei anta siis väärtusi ette.
_________________
Kommentaarid: 7 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 7
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
Timukas0
HV kasutaja
Timukas0

liitunud: 20.03.2007
sõnum 15.10.2011 18:05:44 vasta tsitaadiga
Renkal on lihtsustatud variant, setTimeout-i sisse võib igaüks toppida, mida tahab.

Ennast huvitav hoopis, miks te mõlemad panete funktsiooni väljakutse omakorda funktsiooni sisse:
javascript:
  1. $('selector').hover(function(){
  2.   clearTimeout($('#selector').data('timer'));
  3. },function(){
  4.   starttimer();
  5. });

vs
javascript:
  1. $('selector').hover(function(){
  2.   clearTimeout($('#selector').data('timer'));
  3. }, starttimer);
Kommentaarid: 3 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 3
tagasi üles
vaata kasutaja infot saada privaatsõnum
andrusny
Kreisi kasutaja
andrusny

liitunud: 20.03.2006
sõnum 15.10.2011 18:17:34 vasta tsitaadiga
Huvi pärast proovisin seda lühemat varianti, kuid ei saa tööle, milles ma nüüd puuse panen? Viide siis eelnevalt defineeritud, katsetasin oma koodi põhjal.

$('#box01-confirmation').hover(function() {
clearTimeout(viide);
}); // töötab

  /*
$('#box01-confirmation').hover(clearTimeout(viide)); // ei toimi
*/


_________________
Kommentaarid: 7 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 7
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
Timukas0
HV kasutaja
Timukas0

liitunud: 20.03.2007
sõnum 15.10.2011 18:37:14 vasta tsitaadiga
No alustuseks ütleks, et
javascript:
  1. function sth() {
  2.     // do sth
  3. }

on sama mis
javascript:
  1. var sth = function() {
  2.     // do sth
  3. };

Ehk funktsiooni näol on tegu muutujaga, mida saab samamoodi edasi anda, kui teisi muutujaid. Näiteks
javascript:
  1. function sth() {
  2.     // do sth
  3. }
  4. var otherName = sth;
  5. otherName(); // kutsume funktsiooni välja

JQuery (ja näiteks ka setTimeout) kutsub sinu poolt antud anonüümseid (nimeta) funktsioone samamoodi välja, nagu otherName puhul. Seega toimib see ainult siis, kui sinu nimega funktsioon ei vaja argumente või sobivad talle JQuery poolt antavad.

Sinu näide ei toimi, sest sa ei anna talle funktsioonimuutujat ette, vaid kutsud enne funktsiooni (clearTimeout) välja ja annad talle selle tulemuse (mis on tõenäoliselt undefined vms). Sellistel puhkudel peaks ikka "tavalist" (function(){ ... }) lahendust kasutama (ehk see oli sul enne õige).
Sinu puhul mõtlesin, et võiks nii teha:
javascript:
  1. $('#box01-confirmation').mouseout(start);
Kommentaarid: 3 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 3
tagasi üles
vaata kasutaja infot saada privaatsõnum
muusik
HV kasutaja

liitunud: 31.10.2007
sõnum 15.10.2011 19:59:05 vasta tsitaadiga
5sek on peal box01-confirmation div ja 5sek pärast slide'b see kenasti minema ja tuleb box02 nähtavale. Kuidas ma box02 sisu peita saan box01-confirmation div'i alla?

Näide: http://www.innovative.ee/cv_slider.html
Kommentaarid: 50 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 49
tagasi üles
vaata kasutaja infot saada privaatsõnum
andrusny
Kreisi kasutaja
andrusny

liitunud: 20.03.2006
sõnum 15.10.2011 20:37:47 vasta tsitaadiga
Kui sul vaja ainult teist teksti võid midagi sellist kasutada


<script type="text/javascript">

$(document).ready(function(){
var viide ;

function start(){

viide = setTimeout(function() {
$('#box01-confirmation').fadeOut('fast'),   setTimeout(function() {$('#box01-confirmation').text("see peaks olema alumine blokk, mis alguses 5 sekundit peidus on kui hoverit pole"), $('#box01-confirmation').fadeIn("fast")}, 500);
}, 5000);

}
 
$('#box01-confirmation').mouseover(function() {
clearTimeout(viide);
});

$('#box01-confirmation').mouseout(function() {
start();

});

start();
  });
 
</script>

</head>

<body>

<div id="box01" style="margin: 0 auto; width: 300px; height: 300px; background: #ff0000; color: #fff;">
   <div id="box01-confirmation" style="margin: 0 auto; width: 300px; height: 300px; background: #fff; color: #000;">
   see kiht peaks "box01" sisu ära katma viieks sekundiks
    </div>
    <!-- <div id="box02">
         see peaks olema alumine blokk, mis alguses 5 sekundit peidus on kui hoverit pole
     </div> -->
</div>

_________________


viimati muutis andrusny 15.10.2011 21:07:05, muudetud 2 korda
Kommentaarid: 7 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 7
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
Renka
HV Guru
Renka

liitunud: 01.04.2002
sõnum 15.10.2011 20:48:42 vasta tsitaadiga
andrusny, mu kood oli selgelt kiire näide mitte lõplik produkt. Täpselt samasugust lahendust olen korduvalt kasutanud eri kohtades ja töötab 100% - kaasa arvatud HV avalehel hetkel eripakkumise slideris. Sinu koodist erineb see põhimõtteliselt selle poolest, et sa saad kasutada ainult ühte sellist objekti lehel korraga (üks globaalne muutuja). Minu lahenduse puhul on võimalik timeouti funktsiooni hoida eri elementide küljes - natuke lisakoodi vaja ainult. Kes tahab siis HV avalehel on näide olemas mis toimib täitsa ilusasti.


Timukas0, eks asi ole harjumuses ja mingil määral ka võimaluses kiiremini debugida.
_________________
There is no place like 127.0.0.1
Kommentaarid: 71 loe/lisa Kasutajad arvavad:  :: 2 :: 1 :: 61
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
andrusny
Kreisi kasutaja
andrusny

liitunud: 20.03.2006
sõnum 15.10.2011 21:14:19 vasta tsitaadiga
tsitaat:
Sinu koodist erineb see põhimõtteliselt selle poolest, et sa saad kasutada ainult ühte sellist objekti lehel korraga (üks globaalne muutuja).


ei ütleks, saan lisada ka teise ja kolmanda timeout funktsiooni või millist objekti sa mõtled?
muidugi sinu variant koodist tuleb lühem.

function start(){

viide = setTimeout(function() {
$('#box01-confirmation').fadeOut('fast'),   setTimeout(function() {$('#box01-confirmation').text("see peaks olema alumine blokk, mis alguses 5 sekundit peidus on kui hoverit pole"), $('#box01-confirmation').fadeIn("fast")}, 500);
}, 1000);

viide2 = setTimeout(function() {
$('#box02').fadeOut('fast')
}, 5000);

}

_________________


viimati muutis andrusny 15.10.2011 21:17:57, muudetud 1 kord
Kommentaarid: 7 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 7
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
Renka
HV Guru
Renka

liitunud: 01.04.2002
sõnum 15.10.2011 21:17:27 vasta tsitaadiga
andrusny, milleks dubleerida funktsioonaalsust ja (globaalse)muutuja-pornot teha? icon_rolleyes.gif
_________________
There is no place like 127.0.0.1
Kommentaarid: 71 loe/lisa Kasutajad arvavad:  :: 2 :: 1 :: 61
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
muusik
HV kasutaja

liitunud: 31.10.2007
sõnum 15.10.2011 21:32:59 vasta tsitaadiga
andrusny kirjutas:
Kui sul vaja ainult teist teksti võid midagi sellist kasutada


Aaaaga kui tahan kuvada ka täiendavaid div'e?
Kommentaarid: 50 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 49
tagasi üles
vaata kasutaja infot saada privaatsõnum
Renka
HV Guru
Renka

liitunud: 01.04.2002
sõnum 15.10.2011 21:45:23 vasta tsitaadiga
muusik, kasuta seda mis esimesena andsin. Või kasvõi andrusny oma - pmst sama lahendus - toimib ju. Elemendi sisse võid ju ükskõik mida kujundada.

Või ei saa ma hetkel lihtsalt küsimusest aru? icon_redface.gif
_________________
There is no place like 127.0.0.1
Kommentaarid: 71 loe/lisa Kasutajad arvavad:  :: 2 :: 1 :: 61
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
muusik
HV kasutaja

liitunud: 31.10.2007
sõnum 15.10.2011 21:47:23 vasta tsitaadiga
Võtsin aluseks andruse viimase koodi, selles on lõik:
.text("see peaks olema alumine blokk, mis alguses 5 sekundit peidus on kui hoverit pole")

see eeldab, et panen bloki sisu selle funktsiooni sisse. korrektsem oleks vast, et funktsioon pärib konkreetset div'i ja kui pealmine div läinud on, siis kuvab seda.
Kommentaarid: 50 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 49
tagasi üles
vaata kasutaja infot saada privaatsõnum
Renka
HV Guru
Renka

liitunud: 01.04.2002
sõnum 15.10.2011 21:50:10 vasta tsitaadiga
muusik, see viimane näide muudabki ainult teksti ei midagi muud. Kui tahad mingeid muid asju siis tee nende eelnevate näidete järgi.
_________________
There is no place like 127.0.0.1
Kommentaarid: 71 loe/lisa Kasutajad arvavad:  :: 2 :: 1 :: 61
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
andrusny
Kreisi kasutaja
andrusny

liitunud: 20.03.2006
sõnum 15.10.2011 22:00:08 vasta tsitaadiga
Põhimõtteliselt võid teha nii nagu ennem sul omal html is oli kaks divi valmis kujundatud, alumise paned display:none ja kui vajalik hetk saabub, lülitad JS abil selle display:block peale
_________________
Kommentaarid: 7 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 7
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
Renka
HV Guru
Renka

liitunud: 01.04.2002
sõnum 15.10.2011 22:02:44 vasta tsitaadiga
muusik, kõige lihtsam - vaata siinsamas www.hv.ee slideri ülesehitust icon_wink.gif Täpselt sama asi.


andrusny, su viimane variant jääb päris kole - proovi järgi. icon_wink.gif


Tee nii:
* kujundad kaks divi
* stackid nad üksteise peale z-indexi ja position:absolute; abil
* pealmise faded minema oma selle funktsiooniga

ja tekibki ilus ülemineku efekt - täpselt sama lahendus jällegi HV avalehel nende piltidega icon_wink.gif
_________________
There is no place like 127.0.0.1
Kommentaarid: 71 loe/lisa Kasutajad arvavad:  :: 2 :: 1 :: 61
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
muusik
HV kasutaja

liitunud: 31.10.2007
sõnum 15.10.2011 22:03:14 vasta tsitaadiga
beer_yum.gif
Kommentaarid: 50 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 49
tagasi üles
vaata kasutaja infot saada privaatsõnum
andrusny
Kreisi kasutaja
andrusny

liitunud: 20.03.2006
sõnum 15.10.2011 22:19:44 vasta tsitaadiga
Jah päris puhta disply ga jääb kole järsk see, proovisin oma koodi täiustada ja panin ka divid üksteise alla, toimib. Ei pea kasutama z-index it võib ju ka nad lihtsalt algul kõik ära display:none panna ja vastavad siis välja tuua nagu ma nüüd kahega tegin. Erilist vahet vist pole, z-ndex kasutades peab olema kindel järjekord, niisama fadeIn fadeOut kasutades saab suva järjekorras neid avada.

<script type="text/javascript">

$(document).ready(function(){
var viide ;
var viide2;
function start(){

viide = setTimeout(function() {
$('#box01-confirmation').fadeOut('fast'),   $('#box02').fadeIn('slow') ;
}, 5000);


}
 
$('#box01-confirmation').mouseover(function() {
clearTimeout(viide);
clearTimeout(viide2);
});

$('#box01-confirmation').mouseout(function() {
start();

});

start();
  });
 
</script>
<style>
#box02{display:none;background:#cccccc;margin: 0 auto; width: 300px; height: 300px; color: #000;}
.kast{position:absolute;left:0px;top:0px;}
</style>
</head>

<body>

<div id="box01" style="position:relative;margin: 0 auto; width: 300px; height: 300px; background: #ff0000; color: #fff;">
   <div class="kast"  id="box01-confirmation" style="margin: 0 auto; width: 300px; height: 300px; background: #fff; color: #000;">
   see kiht peaks "box01" sisu ära katma viieks sekundiks
    </div>
  <div id="box02" class="kast" >
         see peaks olema alumine blokk, mis alguses 5 sekundit peidus on kui hoverit pole
     </div>
</div>

_________________
Kommentaarid: 7 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 7
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
näita postitusi alates eelmisest:   
uus teema   vasta Tarkvara »  WWW »  jquery, settimeout ja hover
[vaata eelmist teemat] [vaata järgmist teemat]
 lisa lemmikuks
näita foorumit:  
 ignoreeri teemat 
sa ei või postitada uusi teemasid siia foorumisse
sa ei või vastata selle foorumi teemadele
sa ei või muuta oma postitusi selles foorumis
sa ei või kustutada oma postitusi selles foorumis
sa ei või vastata küsitlustele selles foorumis
sa ei saa lisada manuseid selles foorumis
sa võid manuseid alla laadida selles foorumis



Hinnavaatlus ei vastuta foorumis tehtud postituste eest.