Page switching time transition

Question

Page switching time transition

Navigation

#1 by (1 votes)
#2 by (1 votes)

3

I have an HTML code and I need to make a transition (fade) when I enter another page through the HTML menu that I have. Problem is, I can not make that transition. I need to do something like this link site that if you notice the left menu, when you click on another link it makes a transition on the div's on the right side. 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><scriptsrc="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>

html jquery fade

asked by anonymous 14.08.2014 / 12:28

2 answers

1

Remember that .load () is an ajax call and runs asynchronously. That is, when you do .load () the code continues to run without waiting for the content that the load fetched.

The load however has 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 ()

That is, 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, callback is called once per selector element and this is assigned to that element.

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

14.08.2014 / 13:42

Devexpress spin - culture info I can not generate the table through Hibernate

score 1 · Accepted Answer

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

jsfiddle: link

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's better if all the pages have enough content to be larger than the height of the screen, it made work compensate for the lack of height of the content with a spacer element, and a small flick that I could not get out ...