Mercurial > hg > Members > masakoha > seminar
diff 2014/js/jquery.slideshow.transition.js @ 17:ff03dd29fd52
arrange
author | Masataka Kohagura <kohagura@cr.ie.u-ryukyu.ac.jp> |
---|---|
date | Tue, 07 Apr 2015 17:59:01 +0900 |
parents | js/jquery.slideshow.transition.js@1308906213ab |
children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/2014/js/jquery.slideshow.transition.js Tue Apr 07 17:59:01 2015 +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