Create animation "Fadeout"

Question

The table is created by javascript code when clicked on an item in another table, but it has no animation. The animation I want to put is "Fadeout". When the table item is clicked, it should appear with the "Fadeout" effect. I tried to use Fadetoggle, but I couldn’t.

Ajax:

<script type="text/javascript">
        /* Função Ajax, consulta no banco de dados */
        function mostra_ocorrencias(nome_aluno){
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function(){
                if(xmlhttp.readyState===4 && xmlhttp.status===200){
                    document.getElementById('relatorio').innerHTML = xmlhttp.responseText;
                }
            };
            xmlhttp.open("GET","pesquisa_individual.php?nome_aluno="+nome_aluno,true);
            document.querySelector('relatorio').innerHTML = xmlhttp.send(); 
            // $("#relatorio").fadeToggle();
        }
    </script>

HTML:

<tr onclick="mostra_ocorrencias(id)">

PHP code (single search.php):

<?php
$con = mysql_pconnect("localhost","root","eeep");
mysql_select_db("alunos",$con);
$sql = "select tipo from ocorrencias where nome_aluno = '".$_GET['nome_aluno']."'";
$resultado = mysql_query($sql,$con) or mysql_error();
$falta=0;
$Falta_Justificada=0;
$Fardamento_Incompleto=0;
$ES_Autorizada=0;
$Indisciplina=0;
while ($linha = mysql_fetch_array($resultado)) {
    if($linha['tipo']=="Falta"){
        $falta++;
    }
    if($linha['tipo']=="Falta Justificada"){
        $Falta_Justificada++;
    }
    if($linha['tipo']=="Fardamento Incompleto"){
        $Fardamento_Incompleto++;
    }
    if($linha['tipo']=="Entrada/Saída Autorizada"){
        $ES_Autorizada++;
    }
    if($linha['tipo']=="Indisciplína"){
        $Indisciplina++;
    }
}


**// A Tabela é criada aqui!** 


echo "<table id='relatorio_v'>
    <tr>
        <td class='vermelho'>Falta</td>
        <td class='laranja'>Falta Justificada</td>
        <td class='azul'>Fardamento Incompleto</td>
        <td class='verde'>Entrada/Saída Autorizada</td>
        <td class='marron'>Indisciplína</td>
    </tr>
    <tr>
        <td class='vermelho'>".$falta."</td>
        <td class='laranja'>".$Falta_Justificada."</td>
        <td class='azul'>".$Fardamento_Incompleto."</td>
        <td class='verde'>".$ES_Autorizada."</td>
        <td class='marron'>".$Indisciplina."</td>
    </tr>
    </table>";

?>

Answer 1

To do this only with CSS you need two classes. One that will hide and the other that will display the element.

Initially your table will have the class .hide, after loading the information you will mount the table the way you need and remove the class .hide adding to .show css .show { visibility: visible; opacity: 1; transition: opacity .5s linear; } .hide { visibility: hidden; opacity: 0; transition: visibility 0s .5s, opacity .5s linear; } You said you tried to use fadeToggle. You need to check the following.

1. Table id in sent code is #reportario_v and in javascript Voce used #report.
2. You have jquery in your html ?
3. As you mount the table by an ajax maybe jquery is not finding the ID in the html DOM at the time of the click.
4. As there are several lines and several tables maybe ID does not work.

Note: the effect you are looking for is Fadein and not Fadeout as said :)