3

Tenho um código em HTML e preciso fazer uma transição (fade) na hora que eu entrar em outra página pelo menu do HTML que tenho. O problema é que não estou conseguindo realizar essa transição. Preciso fazer algo do tipo desse site http://www.big.dk/#news que se vocês repararem no menu esquerdo, na hora de clicar em outro link ele faz uma transição nas div's do lado direito. O código que tenho é

index.php

<div class="navbar-inverse white" role="navigation">

    <div id="logo">
        <img src="images/logo.png" width="100" height="40">
    </div>  

    </div>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar navbar-collapse collapse margins" style="overflow-x:hidden;overflow-y:hidden;">
          <ul class="nav nav-sidebar">
            <li class="active"><a href="#">Overview</a></li>
            <li><a href="index.html">Reports</a></li>
            <li><a href="#">Analytics</a></li>
            <li><a href="#">Export</a></li>
          </ul>

        </div>
        <div class="col-sm-9 col-md-10 main" id="conteudo">
          <h1 class="page-header">Dashboard</h1>

          <h2 class="sub-header">Section title</h2>
          <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1,001</td>
                  <td>Lorem</td>
                  <td>ipsum</td>
                  <td>dolor</td>
                  <td>sit</td>
                </tr>
                <tr>
                  <td>1,002</td>
                  <td>amet</td>
                  <td>consectetur</td>
                  <td>adipiscing</td>
                  <td>elit</td>
                </tr>

              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

 <script type="text/javascript">
 $(document).ready( function () {
    $("a").click(function (){
            $("#conteudo").fadeOut("slow").load(this.href).fadeIn('slow');
            return false;
        }
    );
});  
</script>

3 Respostas 3

1

Achei o efeito bem interessante e resolvi tentar fazer, até que ficou parecido:

jsfiddle: http://jsfiddle.net/jaderw/dwLc7e8c/

jquery:

$('.menu a').click(function(event) {
    event.preventDefault();
    var pagina_anterior = $('.container > div:visible');
    var past = $(window).scrollTop();
    var pagina = $('#pagina-' + $(this).attr('href'));
    if(pagina.index() == pagina_anterior.index()) return false;

    if (pagina.outerHeight() < $(window).height()) $('<div class="espacador"></div>').height($(window).height() - pagina.outerHeight()).insertAfter(pagina);
    if (pagina_anterior.outerHeight() < $(window).height()) $('<div class="espacador"></div>').height($(window).height() - pagina_anterior.outerHeight()).insertAfter(pagina_anterior);

    $('.container > div').each(function(index, element) {
        $(this).show();
        if (pagina.index() > pagina_anterior.index() && index == pagina.index()) return false;
        if (pagina.index() < pagina_anterior.index() && index == pagina_anterior.index()) return false;
    });

    $('html, body').scrollTop(pagina_anterior.offset().top + past);

    $('html, body').animate({ scrollTop: pagina.offset().top - 30 }, 1000, function() {
        $('.container > div').not(pagina).hide();
        $('.espacador').remove();
        $('html, body').scrollTop(pagina.offset().top - 30);
    });
});

HTML:

<div class="menu">
    <ul>
        <li><a href="lorem1">Lorem 1</a></li>
        <li><a href="lorem2">Lorem 2</a></li>
        <li><a href="lorem3">Lorem 3</a></li>
    </ul>
</div>
<div class="container">
    <div id="pagina-lorem1">
        <h1>Lorem 1</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div id="pagina-lorem2">
        <h1>Lorem 2</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div id="pagina-lorem3">
        <h1>Lorem 3</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>

Fica melhor se todas as paginas tiverem conteúdo suficiente para ser maior que a altura da tela, deu trabalho compensar a falta de altura do conteúdo com um elemento espaçador, e da um pequeno flick que não consegui tirar...

3
  • seu código está funcionando comigo, só uma dúvida. Quando eu executo a página (index.php) ela mostra todo conteúdo que tem na página até mesmo as divs lorem2, lorem3, lorem4. Como faço para quando iniciar o scripts só mostrar a lorem1 o resto ficar escondida? 14/08/2014 às 18:35
  • veja que adicionei no css para ocultar todas as pages de 2 a 5... outra forma seria ocultar com jquery. 14/08/2014 às 19:01
  • é que o site não está abrindo aqui então não vejo o css. Teria como postar? 15/08/2014 às 2:39
1

Lembre-se que o .load() é uma chamada ajax e corre assincrono. Ou seja, quando você faz o .load() o código continua a correr sem esperar pelo conteudo que o load foi buscar.

O load tem contudo uma callback que é corrida quando o conteudo for devolvido pelo servidor. É aí que você quer correr o fade in. Essa callback pode ser o segundo argumento do .load()

Ou seja, teste assim:

$(document).ready(function () {
    $("a").click(function (e) {
        e.preventDefault(); // uso o prevent default por preferência, mas pode ter como tem: return false;
        $("#conteudo").fadeOut("slow").load(this.href, function () {
            $(this).fadeIn('slow');
        });
    });
});

Segundo a documentação do jQuery o callback é chamado uma vez por cada elemento do seletor e o this é atribuido a esse elemento.

The callback is fired once for each element in the jQuery collection, and this is set to each DOM element in turn.

0

Top tem esse código aqui também so com javascript e html é mais simples de ser feito a forma que é aplicada é bem simples para funcionar os links devem estar dentro da classe container-links_scroll (obs. qualquer nome é valido) e o js é esse

const menuItems = document.querySelectorAll('.container-link_scroll a')

menuItems.forEach(item => {
    item.addEventListener('click', scroll_to_id_on_click)
})


function getScrollTopByHref(element) {
    const id = element.getAttribute('href');
    return document.querySelector(id).offsetTop;
}

function scroll_to_id_on_click(event) {
    event.preventDefault();
    const element = event.target;
    const to = getScrollTopByHref(event.target) - 110;

    scroll_to_position(to);
}

function scroll_to_position(to) {
    window.scroll({
        top: to,
        behavior: "smooth",
        });
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .