How to use Animate and fadeOut in Javascript

Asked

Viewed 121 times

2

I’m making a website. The customer wants just one page with all the pages on it, so I thought I’d use sections. I wanted every change of section, for example from 'start' to 'agencia' to fade the screen and change in this interval, at the end of the fade already show the other section. I managed to get him with Animate him to go to the next section, but wanted to fade, can anyone help me in this?

Here is the HTML

    <body>

<!-- Início -->
<section class="section01">

<nav class="navbar bg-faded" id="menuFixo">
  <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
    &#9776;
  </button>
  <div class="collapse navbar-toggleable-xs menu">
    <!-- <a class="navbar-brand" href="#">Responsive navbar</a> -->
    <ul class="nav navbar-nav">
    <li class="nav-item">
        <div class="logo-header">
        <img src="_img/logo-menu.png" class="logo">
        </div>
      </li>
      <li class="nav-item active">
        <i class="fa fa-circle"></i>
        <a class="nav-link inicio">Início <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link agencia">Agência</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Equipe</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Clientes</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Trabalhos</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contato</a>
      </li>
      <li class="nav-item">
        <a href="#" class="icon-facebook" rel="tooltip" title="" data-placement="top" data-original-title="Facebook"><i class="fa fa-facebook-square"></i></a>
      </li>
      <li class="nav-item">
        <a href="#" class="icon-instagram" rel="tooltip" title="" data-placement="top" data-original-title="Instagram"><i class="fa fa-instagram"></i></a>
      </li>
    </ul>
  </div>

        <div class="collapse navbar-collapse" id="exCollapsingNavbar2">
          <ul class="nav navbar-nav nav-justified">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->

</nav>


<div id="carousel-index" class="carousel slide" data-ride="carousel" data-interval="5000" >
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img src="_img/carousel-index/1.jpg" data-holder-rendered="true">
    </div>
    <div class="carousel-item">
      <img src="_img/carousel-index/2.png">
    </div>
    <div class="carousel-item">
      <img src="_img/carousel-index/3.png">
    </div>
    <div class="carousel-item">
      <img src="_img/carousel-index/4.png">
    </div>
  </div>
  <a class="left carousel-control" href="#carousel-index" role="button" data-slide="prev">
    <span class="icon-prev" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-index" role="button" data-slide="next">
    <span class="icon-next" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

</section>

<!-- Agência -->
<section class="section02">

<nav class="navbar bg-faded" id="menuFixo">
  <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
    &#9776;
  </button>
  <div class="collapse navbar-toggleable-xs menu">
    <!-- <a class="navbar-brand" href="#">Responsive navbar</a> -->
    <ul class="nav navbar-nav">
    <li class="nav-item">
        <div class="logo-header">
        <img src="_img/logo-menu.png" class="logo">
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link inicio">Início <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item active">
        <i class="fa fa-circle"></i>
        <a class="nav-link agencia">Agência</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Equipe</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Clientes</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Trabalhos</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contato</a>
      </li>
      <li class="nav-item">
        <a href="#" class="icon-facebook" rel="tooltip" title="" data-placement="top" data-original-title="Facebook"><i class="fa fa-facebook-square"></i></a>
      </li>
      <li class="nav-item">
        <a href="#" class="icon-instagram" rel="tooltip" title="" data-placement="top" data-original-title="Instagram"><i class="fa fa-instagram"></i></a>
      </li>
    </ul>
  </div>

        <div class="collapse navbar-collapse" id="exCollapsingNavbar2">
          <ul class="nav navbar-nav nav-justified">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->

</nav>

</header>

<div class="row">

<div class="col-md-12">
    <h1>Agência</h1>
</div>

</div>

</section>








<!-- jQuery -->
<script src="_js/jquery-2.2.3.js"></script>

<!-- Bootstrap JavaScript -->
<script src="_js/bootstrap.js"></script>
<script src="_js/carousel.js"></script>

<!-- Script Sections -->
<script src="_js/script.js"></script>

</body>

Here’s the JS I made

$(document).ready(function(){
    $('.inicio').click(function(){
        $('html, body').animate({
            scrollTop: ($('.section01').first().offset().top)
        },750);
    });
    $('.agencia').click(function(){
        $('html, body').animate({
            scrollTop: ($('.section02').first().offset().top)
        },750);
    });


});
javascript jquery-animate

1 answer

0

If I understand correctly, you want to "hide" the other sections and "show" only the one that was selected?

Try it this way: First create a common class for Divs (Here I’m calling from: Divs_Sessoes )
Then in the click event, just hide all and show only the one that was selected. For example:

function SeuEventoClick()
{
     $(".Divs_Sessoes").fadeOut(700);
     $("#SuaDivSelecionada").fadeIn(700);
}

Where you can even pass the div parameter you want to give Fadein. 

function SeuEventoClick(NomeSuaDiv)
    {
         $(".Divs_Sessoes").fadeOut(700);
         $("#" + NomeSuaDiv).fadeIn(700);
    }

Browser other questions tagged javascript jquery-animate

You are not signed in. Login or sign up in order to post.