sandbox

blivesta · Sep 22, 2015 · 894a6dc · 894a6dc
1 parent 661493d
commit 894a6dc
Show file tree

Hide file tree

Showing 9 changed files with 79 additions and 76 deletions.
diff --git a/sandbox/custom-link.html b/sandbox/custom-link.html
diff --git a/sandbox/data-options.html b/sandbox/data-options.html
@@ -26,8 +26,8 @@ <h2>Defaults</h2>
       <li><a class="animsition-link" href="index.html">Basic</a></li>
       <li><a class="animsition-link" href="options.html">Options</a></li>
       <li><a class="animsition-link" href="data-options.html">Data options</a></li>
-      <li><a class="animsition-link" href="custom-load.html">Custom load</a></li>
-      <li><a class="animsition-link" href="custom-link.html">Custom link</a></li>
+      <li><a class="animsition-link" href="methods-in.html">Methods in</a></li>
+      <li><a class="animsition-link" href="methods-out.html">Methods out</a></li>
     </ol>
 
     <h2>Overlays</h2>
@@ -41,7 +41,7 @@ <h2>Overlays</h2>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
   <script src="../dist/js/animsition.min.js" charset="utf-8"></script>
   <script>
-  $(document).on('ready', function(){
+  $( document ).ready(function() {
     var $animsition = $('.animsition');
     $animsition
       .animsition()

diff --git a/sandbox/data.json b/sandbox/data.json
@@ -4,12 +4,12 @@
       "inClass" : "fade-in-up",
       "outClass": "fade-out-up",
       "image": "http://git.blivesta.com/crosscover/images/01.jpg",
-      "url": "./custom-load.html"
+      "url": "./methods-in.html"
     }, {
       "inClass" : "fade-in-down",
       "outClass": "fade-out-down",
       "image": "http://git.blivesta.com/crosscover/images/02.jpg",
-      "url": "./custom-load.html"
+      "url": "./methods-in.html"
     }
   ]
 }
diff --git a/sandbox/index.html b/sandbox/index.html
@@ -20,8 +20,8 @@ <h2>Defaults</h2>
       <li><a class="animsition-link" href="index.html">Basic</a></li>
       <li><a class="animsition-link" href="options.html">Options</a></li>
       <li><a class="animsition-link" href="data-options.html">Data options</a></li>
-      <li><a class="animsition-link" href="custom-load.html">Custom load</a></li>
-      <li><a class="animsition-link" href="custom-link.html">Custom link</a></li>
+      <li><a class="animsition-link" href="methods-in.html">Methods in</a></li>
+      <li><a class="animsition-link" href="methods-out.html">Methods out</a></li>
     </ol>
 
     <h2>Overlays</h2>
@@ -35,7 +35,7 @@ <h2>Overlays</h2>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
   <script src="../dist/js/animsition.min.js" charset="utf-8"></script>
   <script>
-  $(document).on('ready', function(){
+  $(document).ready(function() {
     $('.animsition').animsition();
   });
   </script>

diff --git a/sandbox/custom-load.html → sandbox/methods-in.html b/sandbox/custom-load.html → sandbox/methods-in.html
@@ -4,14 +4,14 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Sandbox: Custom load - Animsition</title>
+  <title>Sandbox: Methods in - Animsition</title>
   <link href="sandbox.css" rel="stylesheet">
   <link href="../dist/css/animsition.min.css" rel="stylesheet">
 </head>
 <body>
 
   <div class="item bg-black">
-    <h1>Animsition: Custom load</h1>
+    <h1>Animsition: Methods in</h1>
   </div>
 
   <h2>$.ajax</h2>
@@ -22,8 +22,8 @@ <h2>Defaults</h2>
     <li><a class="animsition-link" href="index.html">Basic</a></li>
     <li><a class="animsition-link" href="options.html">Options</a></li>
     <li><a class="animsition-link" href="data-options.html">Data options</a></li>
-    <li><a class="animsition-link" href="custom-load.html">Custom load</a></li>
-    <li><a class="animsition-link" href="custom-link.html">Custom link</a></li>
+    <li><a class="animsition-link" href="methods-in.html">Methods in</a></li>
+    <li><a class="animsition-link" href="methods-out.html">Methods out</a></li>
   </ol>
 
   <h2>Overlays</h2>

diff --git a/sandbox/methods-out.html b/sandbox/methods-out.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Sandbox: Methods out - Animsition</title>
+  <link href="sandbox.css" rel="stylesheet">
+  <link href="../dist/css/animsition.min.css" rel="stylesheet">
+</head>
+<body>
+  <div class="animsition">
+
+    <div class="item bg-brown">
+      <h1>Animsition: Methods out</h1>
+    </div>
+
+    <h2>Defaults</h2>
+    <ol>
+      <li><a class="foo" href="index.html">Basic</a></li>
+      <li><a class="foo" href="options.html">Options</a></li>
+      <li><a class="foo" href="data-options.html">Data options</a></li>
+      <li><a class="foo" href="methods-in.html">Methods in</a></li>
+      <li><a class="foo" href="methods-out.html">Methods out</a></li>
+    </ol>
+
+    <h2>Overlays</h2>
+    <ol>
+      <li><a class="foo" href="overlay1.html">Overlay1</a></li>
+      <li><a class="foo" href="overlay2.html">Overlay2</a></li>
+    </ol>
+  </div>
+
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
+  <script src="../dist/js/animsition.min.js" charset="utf-8"></script>
+  <script type="text/javascript">
+    var $animsition = $('.animsition');
+
+    $(document).ready(function() {
+      $animsition.animsition({
+        onLoadEvent: false
+      })
+      .each(function(i){
+        $(this).animsition('in');
+      });
+    });
+
+    $(document).on('click', '.foo', function(event){
+      event.preventDefault();
+      var $elem = $(this);
+      var url = $elem.attr('href');
+      $animsition.animsition('out', $elem, url);
+    });
+
+  </script>
+
+</body>
+</html>
diff --git a/sandbox/options.html b/sandbox/options.html
@@ -21,8 +21,8 @@ <h2>Defaults</h2>
       <li><a class="animsition-link" href="index.html">Basic</a></li>
       <li><a class="animsition-link" href="options.html">Options</a></li>
       <li><a class="animsition-link" href="data-options.html">Data options</a></li>
-      <li><a class="animsition-link" href="custom-load.html">Custom load</a></li>
-      <li><a class="animsition-link" href="custom-link.html">Custom link</a></li>
+      <li><a class="animsition-link" href="methods-in.html">Methods in</a></li>
+      <li><a class="animsition-link" href="methods-out.html">Methods out</a></li>
     </ol>
 
     <h2>Overlays</h2>
@@ -36,7 +36,7 @@ <h2>Overlays</h2>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
   <script src="../dist/js/animsition.min.js" charset="utf-8"></script>
   <script>
-  $(document).on('ready', function(){
+  $(document).ready(function() {
     $('.animsition').animsition({
       inClass:'zoom-in-sm',
       outClass:'zoom-out-sm'

diff --git a/sandbox/overlay1.html b/sandbox/overlay1.html
@@ -27,8 +27,8 @@ <h2>Defaults</h2>
       <li><a class="animsition-link" href="index.html">Basic</a></li>
       <li><a class="animsition-link" href="options.html">Options</a></li>
       <li><a class="animsition-link" href="data-options.html">Data options</a></li>
-      <li><a class="animsition-link" href="custom-load.html">Custom load</a></li>
-      <li><a class="animsition-link" href="custom-link.html">Custom link</a></li>
+      <li><a class="animsition-link" href="methods-in.html">Methods in</a></li>
+      <li><a class="animsition-link" href="methods-out.html">Methods out</a></li>
     </ol>
 
     <h2>Overlays</h2>
@@ -42,7 +42,7 @@ <h2>Overlays</h2>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
   <script src="../dist/js/animsition.min.js" charset="utf-8"></script>
   <script>
-  $(document).on('ready', function(){
+  $(document).ready(function() {
     $('.animsition-overlay').animsition({
       inClass: 'overlay-slide-in-top',
       outClass: 'overlay-slide-out-top',

diff --git a/sandbox/overlay2.html b/sandbox/overlay2.html
@@ -27,8 +27,8 @@ <h2>Defaults</h2>
       <li><a class="animsition-link" href="index.html">Basic</a></li>
       <li><a class="animsition-link" href="options.html">Options</a></li>
       <li><a class="animsition-link" href="data-options.html">Data options</a></li>
-      <li><a class="animsition-link" href="custom-load.html">Custom load</a></li>
-      <li><a class="animsition-link" href="custom-link.html">Custom link</a></li>
+      <li><a class="animsition-link" href="methods-in.html">Methods in</a></li>
+      <li><a class="animsition-link" href="methods-out.html">Methods out</a></li>
     </ol>
 
     <h2>Overlays</h2>
@@ -42,7 +42,7 @@ <h2>Overlays</h2>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
   <script src="../dist/js/animsition.min.js" charset="utf-8"></script>
   <script>
-  $(document).on('ready', function(){
+  $(document).ready(function() {
     $('.animsition-overlay').animsition({
       inClass: 'overlay-slide-in-bottom',
       outClass: 'overlay-slide-out-top',