Faire une div qui s'estompent bien après un laps de temps donné

Quelle est la meilleure façon de faire un <div> disparaître après un laps de temps donné (sans l'aide de certaines des bibliothèques JavaScript disponibles).

Je suis à la recherche d'une solution très léger ne nécessitant pas une énorme bibliothèque JavaScript pour être envoyé au navigateur.

  • jQuery est 15 KO minifiés et peut gérer cela en une seule ligne. J'ai peine à croire que "énorme".
  • 15 KO est énorme, pour certaines valeurs de énorme. Pourquoi utiliser 15k, 500 octets est tout ce qui est nécessaire?
  • navigateurs le fichier dans le cache, donc 15k est juste pour la première utilisation. La croix-navigateur des avantages de jQuery loin emporte sur les 14,5 k différence.
  • Bien que j'utilise une bibliothèque et ne sais pas pourquoi quelqu'un ne serait pas le cas, l'affiche originale ne souhaitez pas. Pas à l'aide d'une bibliothèque est son choix et sa question est valable indépendamment de ce que. JavaScript est un langage valable dans et de lui-même. D'ailleurs, peut-être que son client ne le permettra pas, nous ne le savons pas.
  • Sérieusement, vous en déduire tout autant sur l'OP intentions que les réponses qui suggèrent jQuery. Juste après, une meilleure réponse si vous en avez un, et de laisser les OP et les votes décider. C'est la façon dont il est censé être.
  • Aussi, jQuery a minimisé les versions déjà hébergé que vous pouvez lier à ce qui serait très susceptibles d'être déjà dans le cache.

InformationsquelleAutor Mats | 2008-09-23
  1. 12

    Ne savez pas pourquoi vous seriez donc contre en utilisant quelque chose comme jQuery, ce qui ferait de l'accomplissement de cette effet tous, mais trivial, mais essentiellement, vous avez besoin d'enrouler une série de modifications -moz-opacity, l'opacité, et filter:alpha règles CSS dans un setTimeout().

    Ou, à l'utilisation de jQuery, et l'envelopper d'un fadeOut() appel dans setTimeout. Votre choix.

    • Un autre jQuery zélote poussant sa fave de la bibliothèque sur quelqu'un qui dit qu'ils ne veulent pas utiliser une...:P
    • Pourquoi réinventer la roue? Si vous n'aimez pas jquery, utilisez scriptaculuos, mootools ou quelle que soit la flotte votre bateau. Réinventer la roue est stupide.
    • Ce n'est pas mon point - je utiliser une bibliothèque (MochiKit). Mon point est que le posteur d'origine ne veulent PAS quelqu'un pour répondre à "utilisation de la bibliothèque de X" - mais ce qui se passe? Tout le monde et leur maman carillons avec qui. Pas à l'aide d'une bibliothèque est son choix et sa question est valable quel que soit.
    • L'OP a dit qu'ils ne voulaient pas utiliser une bibliothèque, mais avait défectueux logique. Dans ce cas, je pense que c'est une bonne suggestion. S'ils avaient une raison valable pour ne pas vouloir utiliser une bibliothèque, ce serait différent.
    • Compris - les OP peuvent ne pas être conscient de la réalité de certaines des meilleures bibliothèques, mais nous ne devrions pas essayer de lire dans son esprit - peut-être qu'il a simplement formulé sa question mal, conscients de la façon dont ils sont petits mais, pour quelque raison que ce soit, ne peut pas utiliser un.
    • Je pense juste que c'est marrant qu'à chaque fois que purement JavaScript question est posée sur ce site, jQuery fanatiques de répondre immédiatement à "utiliser jQuery!", même si elle peut ne pas être une bonne solution pour le problème.
    • Dans mon expérience, la réalité de la réponse est que vous n'allez pas trouver un "léger" solution pour la décoloration d'un élément au fil du temps, après un délai qui fonctionnent de la croix-navigateur - le "réinventer la roue" concept s'applique certainement. Aussi, pour être juste, il a dit qu'il ne voulait pas "un énorme bibliothèque".
    • Il suffit de les ignorer Jason, à un certain point dans le temps jQuery blesser ses sentiments et apparemment il aime faire plus de travail que nécessaire.

    InformationsquelleAutor Steve Paulo
  2. 4

    Voici quelques javascript qui le fait. Je l'ai trouvé sur un javascript tutoriel site web quelque part (dont j'ai été incapable de trouver de nouveau) et l'a modifié.

    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);
}

    Le code html suivant montre comment cela fonctionne:

    <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>
    • malheureusement, élément.style.l'opacité n'est pas pris en charge de façon uniforme entre les navigateurs. Tables, en particulier, sont mal à s'estomper dans et hors.
    • J'ai essayé ce code, il fonctionne sur les tables dans FF3 et Chrome, IE7 juste masque les éléments, ils n'ont pas vraiment fade à tous.
    • Si seulement il y avait un moyen de gérer tout ce que la croix-navigateur trucs automatiquement...hmm...
    InformationsquelleAutor Graeme Perrow
  3. 2

    Ces jours, je serais toujours utiliser une bibliothèque pour que -- les progrès qu'ils ont fait a été phénoménale, et la croix de la fonctionnalité de navigateur qui vaut à lui seul il. Si cette réponse est un non-réponse. Je voudrais juste souligner que jQuery est tout de 15 ko.

    InformationsquelleAutor chryss
  4. 0

    Utiliser setTimeout avec le temps initial pour déclencher le fondu de routine et ensuite utiliser setTimeout avec le bas de la minuterie à l'étape à travers le niveau d'opacité de l'image jusqu'à ce qu'il s'en est allé.

    Cependant, jQuery peut descendre à environ 15k et est un one-temps de téléchargement pour le client, donc je n'appellerais pas ça énorme.

    InformationsquelleAutor henriksen
  5. 0

    Essayer le YUI (Yahoo User Interface) de l'Animation de la bibliothèque: http://developer.yahoo.com/yui/animation/

    Ne pas réinventer la roue. Les bibliothèques sont nos amis. 🙂

    • Il n'est pas nécessairement réinventer la roue, peut-être qu'il n'a pas besoin de tout ce qu'une bibliothèque a à offrir. Si j'ai besoin d'un pneu, je n'achète pas une voiture juste pour obtenir un seul des pneus hors d'elle.
    InformationsquelleAutor Mike King
  6. -2

    Je sais que vous êtes vers le bas sur les bibliothèques, mais je vous conseille de prendre un coup d'oeil à moo.fx: http://moofx.mad4milk.net/ - je pense que c'est comme 3k.

    jQuery est sacrément petit trop.

    InformationsquelleAutor Kevin