Fade 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"></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;}
            #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) {
                    $view.fadeOut(250, function() {
                        $view.triggerViewEvents("viewclosed", [$view, $app]);
                        $view.remove();
                    });
                });
                
                $app.off("viewshowing"); // Stop default behaviour
                $app.on("viewshowing", function(e, $view) {
                    $view.fadeIn(250, function() {
                        $view.triggerViewEvents("viewshowed", [$view, $app]);
                    });
                });
                
                // Run the application
                $app.run();
            });
        </script>
    </body>
</html>