Pjax: add animation to content

Question

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

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

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](http://jsbin.com/) or [jsFiddle](http://jsfiddle.net/) to post a more complete example of what isn't working. — Marcel, Jul 04 '13 at 14:39

score 0 · Answer 1 · answered Jul 04 '13 at 07:50

0

may be you need to close " }) "

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

answered Jul 04 '13 at 07:50

Mahmoude Elghandour

2,921
1
22
27

Sorry, my mistake i already have that with my code. It happened when coping pasting here – Erma Isabel Jul 04 '13 at 07:58
Is there anything else that i could have done wrong? Please help. I have been trying this for hours – Erma Isabel Jul 04 '13 at 07:59

score 0 · Answer 2 · answered Jul 04 '13 at 10:06

0

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>

answered Jul 04 '13 at 10:06

Marcel

27,922
9
70
85

Please help. I am tearing my hair out – Erma Isabel Jul 04 '13 at 12:23

Pjax: add animation to content

2 Answers2

Linked