Create animation "FadeOut"

Question

Create animation "FadeOut"

Navigation

#1 by (1 votes)

0

The table is created by javascript code, when clicked on an item from 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 could not.

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 (individual-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>";

? >

javascript html jquery

asked by anonymous 26.07.2017 / 06:17

1 answer

Is it possible to use pyad (module for active directory) in linux? Date parser in C

score 1 · Accepted Answer

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

Initially your table will have class .hide , after loading the information you will mount the table the way you need to remove the class .hide by adding the .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 fadeToggle. You need to check the following.

ID of the table in the code you submitted is #relatorio_v and in javascript you used #report.

Do you have jquery in your html?

As you mount the table by an ajax maybe jquery is not finding the id in the html DOM at the moment of the click.

Since there are multiple rows and multiple tables, maybe ID will not work.

Note: the effect you are looking for is FadeIn and not FadeOut as you said:)