Pjax: add animation to content

Question

For my website i used pjax. I wants to add fadeout and fadein animations to pages.

I tried this stackoverflow answer

My code is

<script type="text/javascript">

// invoke pjax
        $(function(){           
          $('div#header-menu a').pjax('#master-div')            
        })
// do animation
  $(document).on('pjax:start', function() { $('#content').fadeOut(1000); })
  $(document).on('pjax:end',   function() { $('#content').fadeIn(1000);})
    </script>

'content' is the id of div that keeps changing on pjax

Am i doing something wrong?

Please help, Thanks

Cafeteria

Please post more code, it's hard to tell what is wrong from the limited code excerpt you have posted. You can use JS Bin or jsFiddle to post a more complete example of what isn't working. – Poi

Answer 1

may be you need to close " }) "

  .on('pjax:start', function() { $('#main').fadeOut(200); })
  .on('pjax:end',   function() { $('#main').fadeIn(200); **})**

Arlon

Sorry, my mistake i already have that with my code. It happened when coping pasting here – Cafeteria

Is there anything else that i could have done wrong? Please help. I have been trying this for hours – Cafeteria

Answer 2

Does tweaking your JS a little like this help any?

<script type="text/javascript">
  $(function(){           
    // invoke pjax
    $('div#header-menu a').pjax('#content')            
    // do animation
    $(document).on('pjax:start', function() { $('#content').fadeOut(1000); })
    $(document).on('pjax:end',   function() { $('#content').fadeIn(1000);})
  })
</script>

Poi

Please help. I am tearing my hair out – Cafeteria