You might want to use a custom animation or custom behaviour for a page.
This is easily done by using the showElement
and hideElement
-properties.
These properties should be supplied with a method that takes 2 arguments: the first is the page
and the second is a callback that should be executed.
<div data-bind="page: {id: 'fry', showElement: showFry, hideElement: hideFry}"> <h2>Fry</h2> <a class="btn" data-bind="page-href: '../'">Hide Fry</a> </div>
where
showFry:function (page, callback) { $(page.element).fadeIn(1000, callback); }; hideFry:function (page, callback) { var $e = $(page.element); if (!page.pageHiddenOnce) { page.pageHiddenOnce = true; $e.hide(); } else { $e.fadeOut(1000, function () { $e.hide(); }); if (callback) { callback(); } } };