Henrique: Animação #01 com jQuery em HTML

01/07/2021

Animação #01 com jQuery em HTML

Arquivo: estilo.css

@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald-Regular.ttf') format('truetype');
}

*{
    font-family: 'Oswald', sans-serif;
}

html {
    height: 100%;
}

body {
    margin: 0;
    background-color: #0D262D;
    color: #fff;
    height: 100%;
}

table {
    border-collapse: collapse;
}

tr {
    border-bottom: solid 1px white;
}

td {
    font-size: 1.6em;
    padding: 10px;
}

li {
    font-size: 1.6em;
}

.conteudo {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100%;
}

.exercicio div {
    font-size: 1.8em;
    border: solid 5px #fff;
    padding: 0px 40px;
    margin: 10px;
}

.exercicio div:nth-of-type(1) {
    background-color: darkgoldenrod;
}

.exercicio div:nth-of-type(2) {
    background-color: crimson;
}

.exercicio div:nth-of-type(3) {
    background-color: darkcyan;
}

.exercicio div:nth-of-type(4) {
    background-color: darkorchid;
}

.exercicio div:nth-of-type(5) {
    background-color: dodgerblue;
}

.exercicio div:nth-of-type(6) {
    background-color: salmon;
}

.exercicio .destaque {
    border: solid 10px greenyellow;
    color: greenyellow;
    font-weight: bold;
}

Arquivo: animacao1.html

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <title>Animação #01</title>
    <link rel='stylesheet' href='css/estilo.css'>
    <script src='js/jquery.js'></script>
    <style>
        div {
            text-align: center;
        }
        button {
            font-size: 1.8em;
            margin: 10px;
        }
    </style>
</head>

<body class='conteudo exercicio'>
    <h1>Animação #01</h1>
    <button>Iniciar</button>
    <div id='animar'>Animar!</div>

    <script>        
        // tempo da animação
        $('button').click(e =>{
            const t = 450
            $('#animar').hide(t).show(t)
            //$('#animar').fadeOut(t).fadeIn(t)//se estiver exibindo vai esconder e vice verso
            $('#animar').fadeToggle(t).fadeToggle(t)
            //$('#animar').slideUp(t).slideDown(t)
            $('#animar').slideToggle(t).slideToggle(t)
        })

    </script>
</body>