diff js/jquery.slideshow.transition.js @ 0:67f3e23bf09a

add lab intro
author oc
date Thu, 06 Nov 2014 11:46:54 +0900
parents
children
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/js/jquery.slideshow.transition.js	Thu Nov 06 11:46:54 2014 +0900
@@ -0,0 +1,38 @@
+
+function transition( $from, $to ) {
+  $from.hide();
+  $to.show();
+}
+
+function transitionSlideUpSlideDown( $from, $to ) {
+  $from.slideUp( 500, function() { $to.slideDown( 1000 ); } );
+}
+
+function transitionFadeOutFadeIn( $from, $to ) {
+  $from.fadeOut( 500 );
+  $to.fadeIn( 500 );
+}
+
+/***********************
+ * sample custom transition using scrollUp effect
+ * inspired by Karl Swedberg's Scroll Up Headline Reader jQuery Tutorial[1]
+ * [1] http://docs.jquery.com/Tutorials:Scroll_Up_Headline_Reader
+ */
+
+function transitionScrollUp( $from, $to ) {
+  var cheight = $from.outerHeight();
+
+  // hide scrollbar during animation
+  $( 'body' ).css( 'overflow-y', 'hidden' );
+
+  $to.css( 'top', cheight+'px' );
+  $to.show();
+
+  $from.animate( {top: -cheight}, 'slow' );
+  $to.animate( {top: 0}, 'slow', function() {
+    $from.hide().css( 'top', '0px');
+
+    // restore possible scrollbar 
+    $( 'body' ).css( 'overflow-y', 'auto' );
+  }); 
+}
\ No newline at end of file