Question

我的网站在大多数网页上都有像滑块这样的元素。我正在尝试实现SmoothState JS，但我遇到了第二页破解的问题。我知道通过文档我可能需要添加onAfter回调，但我想知道这将应用于何处以及如何应用。显然，如果不熟悉Ajax，那可能会很棘手。

Here is the documentation on the issue.

这是我发布的代码：

$(function(){
  'use strict';
  var $page = $('#uber'),
      options = {
        debug: true,
        prefetch: true,
        cacheLength: 2,
        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');
});

有没有人对我如何添加onAfter回调有什么想法？

Answer 1

我刚开始尝试使用smoothState，但这是我最初的工作原理。

$(document).ready(function(){
  prep(); 
});

$('#main').smoothState({
  onAfter: function() {
    prep();
  }
});


function prep(){

      $('#loadBtn').click(function () { 

          $( '#remote1' ).load( 'external.html #myExternalDiv', function( response, status, xhr ) {
            if ( status == 'error' ) {
              var msg = 'Sorry but there was an error: ';
              $( '#error' ).html( msg + xhr.status + ' ' + xhr.statusText );
            }
            $('#remote1').slideToggle();
          });

      }); 

} // prep

所以我把通常会进入我的$（document）.ready部分的东西放到prep（）函数中。然后我将它称为doc init和onAfter。

回调后的SmoothState

1 个答案: