Comment réaliser un fondu en entrée et en sortie avec JavaScript et CSS

Question

Comment réaliser un fondu en entrée et en sortie avec JavaScript et CSS

Demandé el 25 de Mai, 2011: Quand la question a-t-elle été
286490 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je veux faire en sorte qu'une balise HTML div s'affiche en fondu et s'éteigne en fondu.

J'ai un code qui fait un fondu, mais quand je fais un fondu, l'opacité de la div reste à 0.1 et n'augmente pas.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 <head>
    <title>Fade to Black</title>
    <script type="text/javascript">
        //<![CDATA[
        function slidePanel(elementToSlide, slideSource)
        {
            var element = document.getElementById(elementToSlide);

            if(element.up == null || element.up == false) {
                setTimeout("fadeOut(\"" + elementToSlide + "\")", 100);
                element.up = true;
                slideSource.innerHTML = "Bring it down";
            } else {
                setTimeout("fadeIn(\"" + elementToSlide + "\")", 100);
                element.up = false;
                slideSource.innerHTML = "Take it up";
            }
        }

        function fadeIn(elementToFade)
        {
            var element = document.getElementById(elementToFade);

            element.style.opacity += 0.1;
            if(element.style.opacity > 1.0) {
                element.style.opacity = 1.0;
            } else {
                setTimeout("fadeIn(\"" + elementToFade + "\")", 100);
            }
        }

        function fadeOut(elementToFade)
        {
            var element = document.getElementById(elementToFade);

            element.style.opacity -= 0.1;
            if(element.style.opacity < 0.0) {
                element.style.opacity = 0.0;
            } else {
                setTimeout("fadeOut(\"" + elementToFade + "\")", 100);
            }
        }
        //]]>
    </script>
 </head>
 <body>
    <div>
        <div id="slideSource"
              style="width:150px; height:20px;
                    text-align:center; background:green"
             onclick="slidePanel('panel', this)">
            Take It up
        </div>
        <div id="panel"
              style="width:150px; height:130px;
                    text-align:center; background:red;
                    opacity:1.0;">
            Contents
        </div>
    </div>
</body>
</html>

Qu'est-ce que je fais de travers et quelle est la meilleure façon d'introduire et de supprimer un élément en fondu ?

Demandé el 25 de Mai, 2011 par Rafał

1 votes

Pouvez-vous expliquer le fondu enchaîné ? Il y a une récursivité utilisée, jusqu'à ce que l'opacité ait atteint un, puis la fonction s'arrête ? Mais il n'y a pas de retour à la valeur false pour quitter la fonction ?

Commenté el 6 de Novembre, 2013 par Timo

1 votes

Vous n'avez pas besoin de JavaScript pour effectuer un fondu. Le CSS peut le faire beaucoup plus facilement .

Commenté el 22 de Février, 2018 par Dan Dascalescu

Answer 1

5 Réponses

Answer 2

155voto

Ibu Points 17457

Voici une manière plus efficace de s'effacer un élément :

function fade(element) {
    var op = 1;  // initial opacity
    var timer = setInterval(function () {
        if (op <= 0.1){
            clearInterval(timer);
            element.style.display = 'none';
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op -= op * 0.1;
    }, 50);
}

vous pouvez faire l'inverse pour le fondu enchaîné

setInterval ou setTimeout ne devrait pas recevoir une chaîne de caractères comme argument

Google : les maux de l'ovale pour savoir pourquoi

Et voici une manière plus efficace d'introduire le fondu enchaîné un élément.

function unfade(element) {
    var op = 0.1;  // initial opacity
    element.style.display = 'block';
    var timer = setInterval(function () {
        if (op >= 1){
            clearInterval(timer);
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op += op * 0.1;
    }, 10);
}

Répondu el 25 de Mai, 2011 par Ibu (17457 Points )

0 votes

Comment faire pour qu'elle s'affiche en fondu ?

Commenté el 21 de Juillet, 2013 par Lohn Claidon

1 votes

@LohnClaidon pour un fondu enchaîné, une mise en place op = 0 mettre à jour la condition pour qu'elle devienne if(op >= 1) et changer l'expression d'incrémentation à la fin en op += op*0.1 . Je n'ai pas testé cette méthode, mais je suis certain qu'elle fonctionnera. Et bien sûr, vous supprimez le display ='none' ligne

Commenté el 22 de Juillet, 2013 par Ibu

1 votes

Attention : op est toujours zéro !

Commenté el 13 de Novembre, 2013 par everlasto

Afficher 7 autres commentaires

Answer 3

106voto

Gb01 Points 883

Voici un exemple simplifié de fonctionnement de La solution de Seattle Ninja .

var slideSource = document.getElementById('slideSource');

document.getElementById('handle').onclick = function () {
  slideSource.classList.toggle('fade');
}

#slideSource {
  opacity: 1;
  transition: opacity 1s; 
}

#slideSource.fade {
  opacity: 0;
}

<button id="handle">Fade</button> 
<div id="slideSource">Whatever you want here - images or text</div>

Répondu el 12 de Septembre, 2013 par Gb01 (883 Points )

Answer 4

34voto

Itai Sagi Points 2026

Pourquoi s'infliger cela ?

jQuery :

$("#element").fadeOut();
$("#element").fadeIn();

Je pense que c'est plus facile.

www.jquery.com

Répondu el 25 de Mai, 2011 par Itai Sagi (2026 Points )

5 votes

Génial, je ne savais pas qu'on pouvait le faire aussi facilement avec jQuery.

Commenté el 25 de Mai, 2011 par Rafał

6 votes

Pourquoi s'infliger cela ? Meilleur commentaire de la journée :)

Commenté el 17 de Août, 2014 par Seattle Ninja

120 votes

Parce que vous ne voulez pas attendre qu'un énorme script se charge alors que vous voulez seulement faire apparaître et disparaître quelque chose en fondu.

Commenté el 6 de Novembre, 2014 par Nappa300

Afficher 8 autres commentaires

Answer 5

15voto

Seattle Ninja Points 58

Voici ma tentative d'animation en Javascript et CSS3 Donc le HTML :

 <div id="handle">Fade</div> 
 <div id="slideSource">Whatever you want images or  text here</div>

Le CSS3 avec des transitions :

div#slideSource {
opacity:1;
-webkit-transition: opacity 3s;
-moz-transition: opacity 3s;     
transition: opacity 3s; 
}

div#slideSource.fade {
opacity:0;
}

La partie Javascript. Vérifier si le nom de la classe existe, si c'est le cas, ajouter la classe et les transitions.

document.getElementById('handle').onclick = function(){
    if(slideSource.className){
        document.getElementById('slideSource').className = '';
    } else {
        document.getElementById('slideSource').className = 'fade';
    }
}

Il suffit de cliquer pour qu'elle apparaisse et disparaisse en fondu. Je recommanderais d'utiliser JQuery comme Itai Sagi l'a mentionné. J'ai oublié Opera et MS, donc je recommande d'utiliser prefixr pour ajouter cela dans le css. C'est la première fois que je poste sur stackoverflow mais cela devrait fonctionner.

Répondu el 12 de Juillet, 2013 par Seattle Ninja (58 Points )

Answer 6

8voto

Rafał Points 340

Ok, j'ai trouvé la solution

element.style.opacity = parseFloat(element.style.opacity) + 0.1;

Doit être utilisé à la place de

element.style.opacity += 0.1;

Idem pour

element.style.opacity = parseFloat(element.style.opacity) - 0.1;

Au lieu de

element.style.opacity -= 0.1;

Parce que la valeur de l'opacité est stockée sous forme de chaîne de caractères, et non sous forme de flotteur. Je ne sais toujours pas pourquoi l'ajout a fonctionné.

Répondu el 26 de Mai, 2011 par Rafał (340 Points )

0 votes

Vous pouvez également utiliser element.style.opacity = +element.style.opacity + 0.1; . L'opérateur unaire plus convertit la chaîne de caractères en un nombre (flottant dans ce cas)

Commenté el 19 de Août, 2014 par A1rPun

1 votes

Vous devriez éviter de stocker des valeurs dans le DOM, sauf si vous ne vous souciez pas vraiment des performances...

Commenté el 2 de Mai, 2017 par Jack Giffin

Comment réaliser un fondu en entrée et en sortie avec JavaScript et CSS

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment réaliser un fondu en entrée et en sortie avec JavaScript et CSS

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: