Slide FX smartapp2.js example

<!DOCTYPE html>
<html>
    <head>
        <title>A very simple smartapp2.js example</title>
        
        <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
        
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
            
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>            
            
            
        <script src="https://smartapp.ikx.no/downloads/jquery.smartapp2.js"></script>
        
        
        <script src="https://smartapp.ikx.no/downloads/jquery.slidefx.js"></script>
        
        <style>
            html, body {padding:0;margin:0;height:100%;}
            
            /* Slide animation classes: */
            .view {position:absolute;top:0;left:0;width:100%;height:100%;padding:30px;overflow:visible;}
            .animviewc {
                overflow:hidden !important;
                height:100%;
            }
            .animview {
                overflow:auto !important;
                -moz-transition: all 300ms;
                -o-transition: all 300ms;
                -webkit-transition: all 300ms;
                transition: all 300ms;
            }
            
            #AppContainer {
                width:100%;
                height:100%;
                position:absolute;
                overflow:visible;
            }
        </style>
    </head>
    <body>
        <div id="AppContainer"></div>
        <script>
            $(function() {
                // Initialize app on a DOM element
                var $app = $("#AppContainer").smartapp2();
                
                // Register a view on route #Hello (will be default view, as it is registered first)
                $app.createView("Hello", $app.returnHtml("<div class=\"view\"><h1>Hello ...</h1><a href=\"#World\">Next</a></div>"));
                
                // Register a second view on route #World
                $app.createView("World", $app.returnHtml("<div class=\"view\"><div class=\"well\">World!</div><a href=\"#Hello\">Previous</a></div>"));
                
                // Apply the desired effects
                $app.off("viewclosing"); // Stop default behaviour
                $app.on("viewclosing", function(e, $view) {
                    var opts = {
                        effect: "slideOut",
                        to: "left",
                        complete: function () {
                            $view.triggerViewEvents("viewclosed", [$view, $app]);
                            $view.remove();
                            $app.log("slide out completed");
                        }
                    };
                    $view.hide(opts);
                });
                
                $app.off("viewshowing"); // Stop default behaviour
                $app.on("viewshowing", function(e, $view) {
                    var opts = {
                        effect: "slideIn",
                        from: "right",
                        complete: function () {
                            $view.triggerViewEvents("viewshowed", [$view, $app]);
                        }
                    };
    
                    $view.show(opts);
                });
                
                // Run the application
                $app.run();
            });
        </script>
    </body>
</html>