如何实现 jQuery 插件 Smoothstate？

Question

I seem to have some problem on my website aviralgupta.xyz when i click on the skills link. I don't understand why it isn't working? Pls help I get this error in console for js file functions.js : Uncaught TypeError: content.toggleAnimationClass is not a function

Answer 1

I've seen this question come up a few times. The functions.js that they show on their site uses toggleAnimation() and it doesn't seem to work. Maybe with the newer version of jQuery.

I used a different functions setup:

$(function(){
  'use strict';
  var $page = $('#main'),
      options = {
        debug: true,
        prefetch: true,
        cacheLength: 2,
        forms: 'form',
        onStart: {
          duration: 250, // Duration of our animation
          render: function ($container) {
            // Add your CSS animation reversing class
            $container.addClass('is-exiting');
            // Restart your animation
            smoothState.restartCSSAnimations();
          }
        },
        onReady: {
          duration: 0,
          render: function ($container, $newContent) {
            // Remove your CSS animation reversing class
            $container.removeClass('is-exiting');
            // Inject the new content
            $container.html($newContent);
          }
        }
      },
      smoothState = $page.smoothState(options).data('smoothState');

});

Answer 2

There is a very good demo provided on the website and a good point to start. It says;

All we need to get started is:

1) Include a copy of jQuery and jQuery.smoothState.js on your page

2) Create a new js file and run $('#main').smoothState()

3) Add container with an id of "#main" and include some links inside of it

Link: http://miguel-perez.github.io/smoothState.js/getting-started.html