Compilare un div in modo graduale dopo un determinato periodo di tempo


5

Qual è il modo migliore per far sbiadire uno dopo un determinato periodo di tempo (senza utilizzare alcune librerie JavaScript disponibili).

Sto cercando una soluzione molto leggera che non richiede un'enorme libreria JavaScript da inviare al browser.

  0

jQuery è 15KB minificato e può gestire questo in una riga. Difficilmente lo considero "enorme". 23 set. 082008-09-23 21:57:37

  0

15KB è enorme, per alcuni valori di enorme. Perché usare 15k quando 500 byte è tutto ciò che è necessario? 23 set. 082008-09-23 22:01:40

  0

I browser @adam memorizzano il file in cache, quindi 15k è solo per il primo utilizzo. I vantaggi del cross browser di jQuery superano di gran lunga la differenza di 14.5k. 23 set. 082008-09-23 22:08:16

  0

Anche se uso una libreria e non so perché qualcuno non lo farebbe, il poster originale non lo vuole. Non usare una biblioteca è una sua scelta e la sua domanda è valida a prescindere da ciò. JavaScript è una lingua valida di per sé. Inoltre, forse il suo cliente non lo permetterà, non lo sappiamo. 23 set. 082008-09-23 22:25:16

  0

Seriamente, si deduce altrettanto delle intenzioni dell'OP come delle risposte che suggeriscono jQuery. Pubblica una risposta migliore se ne hai uno e lascia decidere OP e voti. È così che dovrebbe funzionare. 24 set. 082008-09-24 04:06:14

  0

Inoltre, jQuery ha versioni pre-minificate già ospitate che è possibile collegare a cui è altamente probabile che siano già memorizzate nella cache. 26 set. 082008-09-26 17:29:42

12

Non sei sicuro del perché non dovresti usare qualcosa come jQuery, il che renderebbe questo effetto tutt'altro che banale, ma in sostanza, devi completare una serie di modifiche a -moz-opacità, opacità e filtro : regole CSS alfa in un setTimeout().

Oppure utilizzare jQuery e racchiudere una chiamata fadeOut() in setTimeout. La tua scelta.

  0

Un altro fan del jQuery che ha spinto la sua libreria preferita su qualcuno che ha dichiarato di non volerne usare uno: P 23 set. 082008-09-23 22:09:33

  0

Perché reinventare la ruota? Se non ti piace jquery, usa scriptaculuos, mootools o qualsiasi cosa faccia galleggiare la tua barca. Reinventare la ruota è sciocco. 23 set. 082008-09-23 22:16:44

+1

Non è questo il mio punto: io uso una libreria (MochiKit).Il mio punto è che il poster originale NON voleva che qualcuno rispondesse con "usa la biblioteca X" - ma cosa succede? Tutti e la loro mamma suonano insieme. Non usare una biblioteca è una sua scelta e la sua domanda è valida a prescindere. 23 set. 082008-09-23 22:22:56

  0

L'OP ha detto che non volevano usare una libreria ma aveva una logica errata. In tal caso, penso che sia un suggerimento valido. Se avessero una ragione valida per non voler usare una libreria, sarebbe diverso. 23 set. 082008-09-23 22:24:16

  0

Capito - l'OP potrebbe non essere a conoscenza della realtà di alcune delle migliori librerie, ma non dovremmo nemmeno tentare di leggerlo nella sua mente - forse ha semplicemente formulato la sua domanda in modo scadente, consapevole di quanto siano piccole ma, per qualsiasi motivo , non posso usarne uno. 23 set. 082008-09-23 22:29:28

  0

Penso che sia piuttosto divertente che ogni volta che viene richiesta una domanda puramente JavaScript su questo sito, i fanatici di jQuery rispondono immediatamente "usa jQuery!" anche quando potrebbe non essere adatto al problema. 23 set. 082008-09-23 22:30:39

  0

Secondo la mia esperienza, la realtà della risposta è che non si troverà una soluzione "leggera" per sbiadire un elemento nel tempo dopo un ritardo che funzionerà con il cross-browser - il concetto di "reinventare la ruota" certamente si applica. Inoltre, per essere onesti, ha detto che non voleva "un'enorme biblioteca". 24 set. 082008-09-24 00:07:54

  0

Ignora semplicemente Jason, a un certo punto nel tempo jQuery ferisce i suoi sentimenti e apparentemente gli piace fare più lavoro del necessario. 24 set. 082008-09-24 04:03:54


2

In questi giorni, utilizzerei sempre una libreria per questo: i progressi compiuti sono stati fenomenali e la funzionalità di cross-browser da sola vale la pena. Quindi questa risposta è una non risposta. Vorrei solo sottolineare che jQuery è tutto di 15kB.


-2

So che sei giù sulle librerie, ma ti consiglio di dare un'occhiata a moo.fx: http://moofx.mad4milk.net/ - Penso che sia come 3k.

jQuery è abbastanza dannatamente piccolo.


0

Utilizzare setTimeout con il tempo iniziale per attivare la routine di dissolvenza e quindi utilizzare setTimeout con il timer basso per scorrere il livello di opacità dell'immagine finché non scompare.

Tuttavia, jQuery può arrivare a circa 15k ed è un download una tantum per il client, quindi non lo chiamerei enorme.


4

Ecco qualche javascript che lo fa. L'ho trovato da qualche parte su un sito web di tutorial in javascript (che non sono riuscito a trovare di nuovo) e l'ho modificato.

var TimeToFade = 200.0; 

function fade(eid) 
{ 
    var element = document.getElementById(eid); 
    if(element == null) return; 

    if(element.FadeState == null) 
    { 
     if(element.style.opacity == null || element.style.opacity == '' 
       || element.style.opacity == '1') { 
      element.FadeState = 2; 
     } else { 
      element.FadeState = -2; 
     } 
    } 

    if(element.FadeState == 1 || element.FadeState == -1) { 
     element.FadeState = element.FadeState == 1 ? -1 : 1; 
     element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft; 
    } else { 
     element.FadeState = element.FadeState == 2 ? -1 : 1; 
     element.FadeTimeLeft = TimeToFade; 
     setTimeout("animateFade(" + new Date().getTime() 
      + ",'" + eid + "')", 33); 
    } 
} 

function animateFade(lastTick, eid) 
{ 
    var curTick = new Date().getTime(); 
    var elapsedTicks = curTick - lastTick; 

    var element = document.getElementById(eid); 

    if(element.FadeTimeLeft <= elapsedTicks) { 
     element.style.opacity = element.FadeState == 1 ? '1' : '0'; 
     element.style.filter = 'alpha(opacity = ' 
      + (element.FadeState == 1 ? '100' : '0') + ')'; 
     element.FadeState = element.FadeState == 1 ? 2 : -2; 
     element.style.display = "none"; 
     return; 
    } 

    element.FadeTimeLeft -= elapsedTicks; 
    var newOpVal = element.FadeTimeLeft/TimeToFade; 
    if(element.FadeState == 1) { 
     newOpVal = 1 - newOpVal; 
    } 

    element.style.opacity = newOpVal; 
    element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')'; 

    setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33); 
} 

il seguente codice HTML mostra come funziona:

<html><head> 
    <script type="text/javascript" src="fade.js"></script> 
</head><body> 
    <div id="fademe" onclick="fade('fademe')"> 
     <p>This will fade when you click it</p> 
    </div> 
</body></html> 
  0

sfortunatamente, element.style.opacity non è supportato in modo coerente tra i browser. Le tabelle in particolare sono difficili da sfumare dentro e fuori. 24 set. 082008-09-24 00:10:03

  0

Ho provato questo codice - funziona su tabelle in FF3 e Chrome, IE7 nasconde solo gli elementi, in realtà non sbiadiscono affatto. 24 set. 082008-09-24 03:10:13

+1

Se solo ci fosse un modo per gestire tutte le cose del cross browser automaticamente ... hmm ... 24 set. 082008-09-24 04:07:38


0

Prova biblioteca Animazione YUI (Yahoo User Interface): http://developer.yahoo.com/yui/animation/

Non reinventare la ruota. Le biblioteche sono i nostri amici. :-)

+1

Non sta necessariamente reinventando la ruota - forse non ha bisogno di tutto ciò che una biblioteca ha da offrire. Se ho bisogno di una gomma, non compro un'intera macchina solo per toglierne una. 24 set. 082008-09-24 03:11:52