How to use animate and fadeOut in Javascript

Question

How to use animate and fadeOut in Javascript

Navigation

#1 by (0 votes)

2

I'm making a website. The client wants only one page with all the pages in it, so I thought about using sections. I wanted every section change, for example from 'start' to 'agency' to fade the screen with a fade and change in that interval, at the end of the fade already show the other section. I managed to do it with animate he go to the next section, but wanted to fade, can anyone help me in this?

Here is 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 did

$(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

asked by anonymous 11.05.2016 / 05:03

1 answer

Navigation Drawer - Call camera through Menu Facebook page does not open with click - nightwatch

score 0 · Answer 1

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

Try this: First create a common class for the Divs (Here I am calling: 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 by parameter the div that you want to give FadeIn.

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