Switch page time transition

Question

I have an HTML code and I need to make a transition (fade) when I enter another page through the HTML menu I have. The problem is that I’m not able to make this transition. I need to do something like this site http://www.big.dk/#news that if you notice the left menu, when you click on another link it transitions into the right side divs. The code I have is

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>

Answer 1

Remember that the .load() is an ajax call and runs asynchronous. That is, when you do the .load() the code keeps running without waiting for the contents that the load has fetched.

The load has however a callback that is run when the content is returned by the server. That’s where you want to run the fade in. This callback may be the second argument of .load()

I mean, test like this:

$(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');
        });
    });
});

According to the jQuery documentation the callback is called once per each element of the selector and the this is assigned to this element.

The callback is Fired Once for each element in the jQuery Collection, and this is set to each DOM element in turn.

Answer 2

I found the effect very interesting and I decided to try to do, until it became similar:

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>

It looks better if all pages have enough content to be larger than the screen height, it took work to compensate for the lack of content height with a spacer element, and a small Flick that I could not take...

Answer 3

Top has this code here also only with javascript and html is simpler to be done the way it is applied is quite simple to run the links must be within the container-links_scroll class (Obs. any name is valid) and the js is this

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",
        });
}