WN

WN (https://www.wn.se/forum/index.php)
-   Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)
-   -   Ang. Jquery "intro" (https://www.wn.se/forum/showthread.php?t=34044)

Althalos 2008-12-18 20:13

Skulle fixa ett "intro" åt någon. Det ska dels fada in en bild samt gå till en ny sida när bilden är infadad. Just nu är jag där jag bara helt enkelt ska fada bilden och visa hur många procent av introt som klarats av, ingenting fungerar men dock om jag sätter in en alert högst upp syns den och jag vet därför att åtminstone filerna är inladdade, dessutom ser jag det på loggan vars opacity blir noll i början av skriptet.

Kod:

$(document).ready(function(){
alert('test');
$("#logo").css('opacity','0.01');
for (var i = 10000; i>0; i=i-100) {
 * *setTimeout(i, function() {
 * *$("#logo").fadeTo(1-i/10000);
 * *$("#percentage").html(i/100 + '%');
 *});
}
});

Vet någon hur man kan fixa det här? Något fel på for-loopen?

edit: notera att det är Jquery som jag använder

TommyTisen 2008-12-19 18:42

kan tyvärr inte jQuery, och vet därför inte om det finns nån annan setTimeout-metod...
om det är javascripts standardmetod så ju den
setTimeout(function,milliseconds)... inte (milliseconds, function)...

hoppas det hjälper, annars ber jag om ursäkt för att jag inte kan jQuery

Althalos 2008-12-19 19:46

Jo, du hade helt rätt. Mkt bra poäng... fortfarande något fel dock.. den kör bara for-loopen en gång eller något, procentgrejen skriver den till 0% direkt och sedan händer ingenting mer..

Citat:

$(document).ready(function(){
$("#logo").css('opacity','0.01');
for (var i = 10000; i>0; i=i-100) {
setTimeout(function() {
$("#logo").fadeTo("fast",1-i/10000);
$("#percentage").html(i/100 + '%');
},i);
}
});


phenomenon 2008-12-19 20:38

Citat:

Originally posted by Althalos@Dec 19 2008, 20:46
Jo, du hade helt rätt. Mkt bra poäng... fortfarande något fel dock.. den kör bara for-loopen en gång eller något, procentgrejen skriver den till 0% direkt och sedan händer ingenting mer..
Citat:

(document).ready(function(){
(#logo).css(opacity,0.01);
for (var i = 10000; i0; i=i-100) {
*setTimeout(function() {
*(#logo).fadeTo(fast,1-i/10000);
*(#percentage).html(i/100 + %);
},i);
}
});


for (var i = 10000; i>0; i -= 100) {

TommyTisen 2008-12-19 21:57

testa att köra new function() istället... vet inte om det gör nån skillnad dock...

jo, du...
i setTimeout-metoden ska argument 1 vara en sträng...
setTimeout("function() {
(#logo).fadeTo(fast,1-"+i+"/10000);
(#percentage).html("+i+"/100 + %);
}",i);

(glöm inte "+i+" där i)

är ju inte säker, men testa iaf. :unsure:

Onkelborg 2008-12-20 17:22

I setTimeout ska det inte alls vara någon sträng som argument, även om det fungerar så den i bakgrund kör eval() på alltihopa. Bäst är att skicka med en funktion. Hur som haver, det Phenomen skriver ska nog få det att fungera.

Sedan en annan sak: Jag tvivlar på att det är bra att skapa 100 timeouts på en gång, borde räcka fint med t.ex. en rekursiv funktion med setTimeout. Typ:

var func = function(i)
{
//fadeTo(i)-någonting
if(i<100)
{
setTimeout(function(){func(i+1);}, 10);
}
}
func(0); //Initsiera

Borde fungera tycker jag. Exakt körtid lär variera lite då det här med setTimeout inte är särskilt exakt (även google chrome nog ska vara exakt, men det är den nog unik med.) En variant är göra någonting liknande:

var fadeDate = new Date();
var funcInterval = setInterval(function()
{
var date = new Date();
//Gör en beräkning mellan fadeDate och date, får hur länge animationen har gått, sätt lämplig fade
if(stoppa_animationen)
{
clearInterval(funcInterval);
}
}, 10);

Althalos 2008-12-21 17:04

Nej det fungerar tyvärr inte. Börjar bli lätt stressad... måste få klart det här. Sidan ligger uppe här: http://uf.ekdahlproduction.com/itsvintage2/intro.html

Börjar tänka på alternativa lösningar, har någon en sådan så tell me.

Onkelborg 2008-12-21 17:21

Vilket fungerar inte?

TommyTisen 2008-12-23 09:04

Ah, nu vet jag vad som kan vara problemet....det är det här med variabeln i.

När dina timeouter slår till så försöker den leta efter variabeln i, och vid den tidpunkten har ju i minskat till 0,och därigenom blir den noll. Detta går att lösa med jobbiga "sparanden" av värdet i för olika tidpunkter, men det är inte en bra lösning i detta fallet.

Bästa lösningen är det där rekursiva sättet som Onkelborg förslår.
Do it like that.


(Onkelborg: i vanliga javascript (kan inte jQuery) så är argument 1 en sträng om man vill tro w3schools:
"The first parameter of setTimeout() is a string that contains a JavaScript statement. This statement could be a statement like "alert('5 seconds!')" or a call to a function, like "alertMsg()".
"
http://www.w3schools.com/js/js_timing.asp )

Onkelborg 2008-12-23 09:30

Ah, jo, det är i som ställer till det. Går att komma runt genom att kopiera värdet till en ny variabel i funktionen.

W3schools ska man kan inte ta som sanning ;) w3.org är bättre källa :) http://www.w3.org/TR/Window/#window-timers


Alla tider är GMT +2. Klockan är nu 22:43.

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson